CODEWITHSUNDEEP
angularjsangularjs-scope
user3099838
user3099838

Reputation:

AngularJS mathematical calculations with ng-model, ng-click buttons, outputting the results in web app

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.

Upvotes: 0

Views: 17896

Answers (2)

Guilherme Nagatomo
Guilherme Nagatomo

Reputation: 306

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.

Upvotes: 3

Davin Tryon
Davin Tryon

Reputation: 67296

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

Upvotes: 4

Related Questions