How do I get the total sum in ng-init and ng-repea

Question

Having a problem with in ng-init and ng-repeat angularjs

i'm trying to loop the fields rates to get the total

for example this is my table

nane +++++++id+++++++rate

joe +++++++++1+++++++3

joe +++++++++2+++++++3

joe +++++++++3+++++++3

joe +++++++++4+++++++3

this my code.

<table>
<tr>
  <td>name</td>
  <td>rate</td>

</tr>
<tr ng-repeat="item in videos">
<td>{{item.name}}</td>
  <td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>

</tr>
<tr>
  <td>Total</td>
  <td>{{videos.total.rate}}</td>

</tr>

The Result that I get is 3333 instead of 12 when added all together

this is the line with problem

<td ng-init="videos.total.rate = videos.total.rate + item.rate">{{item.rate}}</td>

if i change it to a number it works fine.

<td ng-init="videos.total.rate = videos.total.rate + 3">{{item.rate}}</td>

your help would be great.thanks

Answer 1

move this logic into the controller. That is what it is for. The view should be displaying data.

Now you have to worry about how to cast strings to an integer and writing 4x more code in a language that angular must interpret into javascript.

The complexity you are adding here is going to be fun to maintain.

---

but you probably want to continue doing it wrong, in which case this should work: <table ng-init='videos.total = {"rate": 0}'>

Answer 2

Define a filter to calculate the total:

app.filter('calculateRateTotal',function(){
    return function(input){
        var total = 0;
        angular.forEach(input,function(value,key){
            total = total+value.rate;
        });
        return total;
    };
});

HTML:

<td ng-bind="videos | calculateRateTotal"></td>

Answer 3

After 10hrs of no luck just my managed to get it right. turned to be very simple.

This is the code.

In the Controller added

$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.videos.length; i++){
    var item = $scope.videos[i];
    total += (item.rate*1);
}
return total;   }

And HTML

<table>

        <tr>
            <th>Rate</th>
        </tr>


        <tr ng-repeat="item in videos">
            <td>{{item.rate}}</td>

        </tr>           
        <tr>              
            <td>Total: {{ getTotal() }}</td> 
        </tr>

    </table>

Thanks everyone for helping

Answer 4

Try something like this in controller.

JS

   $scope.RateTotal= 0;
    for (var i = 0; i < data.length; i++) {
    $scope.RateTotal= $scope.RateTotal + data[i].rate;
   } 

HTML

  <p>{{RateTotal}}</p>

---

Option above is better, but if you want use ng-init use something like this.

<table ng-init="RateTotal = 0">
 <thead>
<th>Rate</th>
 </thead>
<tbody>
<tr ng-repeat="item in videos">
<td ng-init="$parent.RateTotal= $parent.RateTotal + item.rate">{{item.rate}}</td>
</tr>
<tr>
       <thead>
            <tr>
            <th>Total</th>
            <th>{{RateTotal}}</th>
            </tr>
       </thead>
</tr>
</tbody>
</table>

P.S.

This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope. - ngInit