ng-repeat - count within html loop

Question

Is there anyway to count an item, then display it outside of the loop?

<tr ng-repeat="value in values">
   <td>value.total</td>
</tr>
<tr>
   <td>Total Of All Values: {{ total }}</td>
</tr>

I've tried using ng-init() to no success as I think it's over-riding each time.

<tr ng-repeat="value in values">
   <td ng-init="total = total + value.total>value.total</td>
</tr>
<tr>
   <td>Total Of All Values: {{ total }}</td>
</tr>

Is there anyway of doing it here, without making a function in my controller?

Well, it is possible and the answers show how, but do you believe such calculations should be done in the template? — user1563700
– user1563700, Commented Sep 4, 2014 at 14:02
Thanks for the question..I was wondering how this can be achieved.. — forgottofly
– forgottofly, Commented Jan 1, 2016 at 12:06
@Alias stackoverflow.com/questions/22731145/… - check this post — Rajamohan Anguchamy
– Rajamohan Anguchamy, Commented Jul 4, 2016 at 12:33

Prasad K - Google · Accepted Answer · 2014-09-04 14:35:19Z

6

total which is initialized in ng-repeat will be of a different scope and can not be accessed outside the loop.

Try this:

<table ng-init="total = 0">
<tr ng-repeat="value in values">
   <td ng-init="$parent.total = $parent.total + value.total">{{value.total}}</td>
</tr>
<tr>
   <td>Total Of All Values: {{ total }}</td>
</tr>
</table>

edited Sep 4, 2014 at 14:35

answered Sep 4, 2014 at 13:59

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V31 · Accepted Answer · 2014-09-04 13:59:04Z

3

You can make use of $parent notation to access a $scope variable (from outside ng-repeat) in the ng-repeat scope. So now after initializing it will calculate the total and store it in the $scope variable which was initialized outside.

Code:

<div ng-app ng-controller="test">
    <table ng-init="total=0;">
        <tr ng-repeat="value in values">
            <td ng-init="$parent.total = total + value">{{value}}</td>
        </tr>
        <tr>
            <td>Total Of All Values: {{ total }}</td>
        </tr>
    </table>
</div>

Working Fiddle

answered Sep 4, 2014 at 13:59

V31

7,6643 gold badges28 silver badges44 bronze badges

Comments

Nikolas · Accepted Answer · 2014-09-04 14:17:05Z

Although they do seem to be similar ngRepeat does not work like a for loop in an imperative programming language. The ngRepeat directive consists of two steps that run seperately. First, it produces an array / a map with the repeatet values. Secondly, it renders the template (the elements inside the element with ngRepeat) for each repeatet value. It does not however iterate over a code block like an imperative programming language.

Even though you may achieve what you try to do with $parent.total, you may run into other pitfalls with this solution as soon as the contents of your array change. To cut it short, you should rather find another way to sum up the values in the array.

In my opinion, the best place to sum up the values is the controller with a line like this:

$scope.total = values.reduce(function (a,b) {return a+b});

Entomo · Accepted Answer · 2014-09-04 14:10:36Z

0

You could always do this in your JS function.

        $scope.values = data;
        angular.forEach($scope.values,function(value){
          $scope.total += value.value;
        });

Working plunker: http://plnkr.co/edit/5WZ9alCXzq115wi3xl4B?p=preview

answered Sep 4, 2014 at 14:10

Entomo

2753 silver badges13 bronze badges

Collectives™ on Stack Overflow

ng-repeat - count within html loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related