I am trying to create a function that will sum up some numbers from an ining 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?

I am trying to create a function that will sum up some numbers from an ining 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?

• javascript
• angularjs

• You need to bind the variable to the scope. $scope.totalNumber = 0. – whirlwin Commented Oct 21, 2013 at 9:54
• 2 whatever the definition of total() you'll be able to display its value by simply doing {{ total() }} – Joe Minichino Commented Oct 21, 2013 at 9:54
• @whirlwin doesn't work.. shows nothing, and if I add var it throws an error – The Whiz of Oz Commented Oct 21, 2013 at 9:59

3 Answers 3

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();
  });

}

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.

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.