0

I'm starting with AngularJS, learning it bit by bit. For several days now, I am trying to understand how to calculate between ng-models (scopes) in a web-application.

Here is what I am trying to solve as an example: http://plnkr.co/edit/M2b7GNcbgM30phLXT8pU There, if I buy a stack (one click on the 1st button) of papers, then I sell 2 sheets (2 clicks on the 2nd button), the result should show "You have 1.998 stacks"

HTML

First we buy a stack of papers…
<button input type="button" class="btn" name="StackOfPaper" ng-model="StackOfPaper" ng-click="StackOfPaper = StackOfPaper + 1" ng-init="StackOfPaper=0">Buy a stack of papers<br>(total bought: {{StackOfPaper|number:3}})</button><br><br>

…then we sell individual paper sheets…
<button input type="button" class="btn" name="PaperSheet" ng-model="PaperSheet" ng-click="PaperSheet = PaperSheet + 1" ng-init="PaperSheet=0">Sell a paper sheet<br>(total sold: {{PaperSheet}})</button><br><br>

…get the number of sheets left in the stacks<br> 
You have {{whatsleft|number:3}} stacks

JS

var app = angular.module('paper', []);

$scope.$watch(function() {
    return Math.floor($scope.StackOfPaper*1000 - $scope.PaperSheet);
}, function(SheetsLeft) {
    $scope.SheetsLeft = whatsleft;
});

Could you please help me, or suggest a good tutorial for this, I have tried all the combinations other people used, read tons of how-tos, but nothing worked for me. Maybe I am omitting some small things there?

Or is there a better way of doing the said things? Thank you for the explanation.

Improve this question

2 Answers 2

Reset to default
4

Here is an updated plunker.

Since you are doing all of your scope stuff in the template right now. The easiest solution is to do the math inline:

You have {{StackOfPaper - (PaperSheet * .001)|number:3}} stacks

However, it is probably best (because you can test it easier) to have a controller that allows you to work on your model separate from the view.

Here is a second plunker.

With the controller:

app.controller('Ctrl', function($scope) {

      $scope.total = 0;
      $scope.stacks = 0;
      $scope.soldSheets = 0;

      $scope.calculateTotal = function() {

        $scope.total = $scope.stacks - ($scope.soldSheets * .001);
      }

      $scope.addStack = function() {

        $scope.stacks = $scope.stacks + 1;
        $scope.calculateTotal();
      }

      $scope.sellSheet = function() {

        $scope.soldSheets = $scope.soldSheets + 1;
        $scope.calculateTotal();
      }
});

This cleans up the HTML:

You have {{total|number:3}} stacks
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Your math is different than what the OP seems to want. I think it should be: (StackOfPaper - (PaperSheet * 0.001))
Your code now matches what his code did, but his code was inconsistent with his introductory text which implied he wanted 1 stack to = 1000 sheets of paper and have the output displayed in units of stacks. In any case, I think you answer explains the angularjs best practices of how to accomplish this (whatever the math is supposed to be).
I'm obviously confused about the requirement! :) But, as you said, I think the OP should be able to figure it out from here.
@Davin Tryon: Thank you very much for your answer! I have spent several hours now, trying to understand it as best as I could, so that I can replicate the logic next time, myself. Your solution has vastly improved my understanding of the scope function and gave me a solid spot, from wich I can leap forward.
@ErvWalter: Yes, you are right, I have made a mistake there, what I meant was 0.001 instead of the 1000. Thank you for the input aand correction.
3

Since Davin's answer should solve your problem, I just want to clarify some things. $scope.$watch is useful to watch for scope changes and trigger some action when a certain variable is changed eg:

$scope.someVar = 0

$scope.foo = function(){
    $scope.someVar += 1
}

$scope.$watch('someVar', function(newValue, oldValue){ /* do some magic */ })

Business logic should be done by controller functions. Try not to do it in the view.

See this answer to understand how things works in Angular.

Improve this answer

1 Comment

thank you! This also helps my understanding of the topic. Great link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.