CODEWITHSUNDEEP
javascriptangularjs
The Whiz of Oz
The Whiz of Oz

Reputation: 7043

Angular - sum up numbers using a function and put it in the view

I am trying to create a function that will sum up some numbers from an incoming factory (and some from the client-side in real time), and will put the sum in the view. Totally stuck.

1 - First of all, I do not understand how to display in the view a variable that was assembled within a controller function.

So let's say I have something like:

$scope.total = function() {
    var totalNumber = 0;

}

How do I get the totalNumber to show in the view?

I assume after I get this, in order to sum up my factory data: 

var revenues = [
            { amount: 1254 },
            { amount: 1654 },
            { amount: 33 },
            { amount: 543 }

    ];

I will have to do something like:

 $scope.total = function() {
 var totalNumber = 0;
    for(i=0; i<revenues.length; i++){
      totalNumber = totalNumber + revenues[i].amount
    }

    }

Is this correct? Will it update in real time if I dynamically change the revenue array?

Upvotes: 6

Views: 15440

Answers (3)

thebenedict
thebenedict

Reputation: 2589

Here's a plunker

There's more than one way to do this, and your controller might look different depending on how the data looks from your factory.

Edit: A couple of good answers were posted here while I was writing. This is similar to Brian's first approach.

Upvotes: 0

Brian Genisio
Brian Genisio

Reputation: 48127

As promised, here is a different approach. One that watches the revenues collection and updates a value every time it changes:

<div ng-app ng-controller="SumCtrl">

  Total: {{total}}

  <input type="text" ng-model="newAmount" />
  <button ng-click="add(newAmount)">Add</button>

</div>

And the JavaScript:

function SumCtrl($scope) {

  function total() {
    var totalNumber = 0;
    for(var i=0; i<$scope.revenues.length; i++){
      totalNumber = totalNumber + $scope.revenues[i].amount
    }

    return totalNumber;
  }

  $scope.revenues = [
    { amount: 1254 },
    { amount: 1654 },
    { amount: 33 },
    { amount: 543 }
  ];

  $scope.add = function(value) {
    $scope.revenues.push({ amount: parseInt(value) });
  }

  $scope.$watchCollection("revenues", function() {
    $scope.total = total();
  });

}

Upvotes: 8

Brian Genisio
Brian Genisio

Reputation: 48127

There are several approaches to solving this. If you want a total() function, it goes like this:

<div ng-app ng-controller="SumCtrl">

  Total: {{total()}}

  <input type="text" ng-model="newAmount" />
  <button ng-click="add(newAmount)">Add</button>

</div>

And here is the code:

function SumCtrl($scope) {

  $scope.revenues = [
    { amount: 1254 },
    { amount: 1654 },
    { amount: 33 },
    { amount: 543 }
  ];

  $scope.total = function() {
    var totalNumber = 0;
    for(var i=0; i<$scope.revenues.length; i++){
      totalNumber = totalNumber + $scope.revenues[i].amount
    }

    return totalNumber;
  }

  $scope.add = function(value) {
    $scope.revenues.push({ amount: parseInt(value) });
  }

}

The total() function will re-evaluate whenever the scope changes (a lot). A better approach is to watch for changes to revenues and update a static value... I'll post that answer as well.

Upvotes: 0

Related Questions