Increment A Variable In AngularJS Template

Question

I'll preface this by saying I am very new to AngularJS so forgive me if my mindset is far off base. I am writing a very simple single page reporting app using AngularJS, the meat and potatoes is of course using the angular templating system to generate the reports themselves. I have many many reports that I am converting over from a Jinja-like syntax and I'm having a hard time replicating any kind of counter or running tabulation functionality.

Ex.

{% set count = 1 %}
{% for i in p %}
  {{ count }}
  {% set count = count + 1 %}
{% endfor %}

In my controller I have defined a variable like $scope.total = 0; which I am then able to access inside of the template without issue. What I can't quite figure out is how to increment this total from within an ng-repeat element. I would imagine this would look something like -

<ul>
    <li ng-repeat="foo in bar">
        {{ foo.baz }} - {{ total = total + foo.baz }}
    </li>
</ul>
<div> {{ total }} </div>

This obviously doesn't work, nor does something like {{ total + foo.baz}}, thanks in advance for any advice.

Addition operator is ambiguous, but subtraction forces type conversion to Number. {{count - -1}} — James M. Lay
– James M. Lay, Commented Dec 3, 2014 at 0:40

Tim Stewart · Accepted Answer · 2014-04-15 00:35:12Z

33

If all you want is a counter (as per your first code example), take a look at $index which contains the current (0 based) index within the containing ngRepeat. And then just display the array length for the total.

<ul>
    <li ng-repeat="item in items">
        Item number: {{$index + 1}}
    </li>
</ul>
<div>{{items.length}} Items</div>

If you want a total of a particular field in your repeated items, say price, you could do this with a filter, as follows.

<ul>
    <li ng-repeat="item in items">
        Price: {{item.price}}
    </li>
</ul>
<div>Total Price: {{items | totalPrice}}</div>

And the filter function:

app.filter("totalPrice", function() {
  return function(items) {
    var total = 0, i = 0;
    for (i = 0; i < items.length; i++) total += items[i].price;
    return total;
  }
});

Or, for improved reusability, a generic total filter function:

  app.filter("total", function() {
    return function(items, field) {
      var total = 0, i = 0;
      for (i = 0; i < items.length; i++) total += items[i][field];
      return total;
    }
  });

Which would be used like:

<div>Total price: {{items | total:'price'}}</div>

edited Apr 15, 2014 at 0:35

answered Oct 22, 2012 at 12:28

Tim Stewart

7596 silver badges8 bronze badges

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

2 Comments

HurnsMobile Over a year ago

The second example is exactly what I was looking for! Thanks kindly.

Youdaman Over a year ago

With the generic total filter function, the field should be an argument to the returned function, not the filter itself (otherwise Angular complains that it's an unknown Provider), i.e. app.filter("total", function() { and return function(items, field) {

nikib3ro · Accepted Answer · 2014-06-24 20:42:45Z

5

I needed running total rather that plain total, so I've added upon what @TimStewart left. Here the code:

app.filter("runningTotal", function () {
    return function(items, field, index) {
        var total = 0, i = 0;
        for (i = 0; i < index+1; i++) {
            total += items[i][field];
        }
        return total;
    };
});

To use it in column you just do:

<div>Total price: {{items | runningTotal:'price':$index}}</div>

answered Jun 24, 2014 at 20:42

nikib3ro

20.7k25 gold badges124 silver badges185 bronze badges

1 Comment

Rodolfo Jorge Nemer Nogueira Over a year ago

Very elegant solution for running total

dnc253 · Accepted Answer · 2012-10-19 23:08:16Z

0

I'm not sure I totally understand the question, but are just needing to display the total number in the object you're iterating over? Just set $scope.total to the length of your array (bar in your example above). So, $scope.total = $scope.bar.length;

If you're wanting the total of all the foo.baz properties, you just need to calculate that in your controller.

$scope.total = 0;
angular.forEach($scope.bar, function(foo) {
    $scope.total += foo.baz;
});

answered Oct 19, 2012 at 23:08

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

1 Comment

HurnsMobile Over a year ago

From a reporting angle this doesn't really make much sense. Pre-processing all of the totals in the report data before the template is processed isn't really possible in many cases.

Collectives™ on Stack Overflow

Increment A Variable In AngularJS Template

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related