在AngularJS模板中递增变量

一尘不染

在AngularJS模板中递增变量

angularjs

首先，我会说我对AngularJS很陌生，所以如果我的心态还差得远，请原谅我。我正在使用AngularJS编写一个非常简单的单页报告应用程序，当然，肉和土豆也使用了角度模板系统来自己生成报告。我有许多报告要从类似Jinja的语法转换过来，并且很难复制任何类型的计数器或运行制表功能。

例如

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

在我的控制器中，我定义了一个变量，这样$scope.total = 0;我就可以毫无问题地访问模板内部。我还不太清楚是如何total从一个ng- repeat元素中增加它的。我想这看起来像-

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

这显然是行不通的，也不是类似的东西{{ total + foo.baz}}，在此先感谢您的任何建议。

阅读 239

2020-07-04

共1个答案

一尘不染

如果您想要的只是一个 计数器 （按照您的第一个代码示例），请查看$
index，该索引包含包含的ngRepeat中的当前（从0开始）索引。然后只显示总数的数组长度。

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

如果要在重复的项目中 总计一个特定字段 （例如价格），则可以使用过滤器执行此操作，如下所示。

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

和过滤功能：

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

或者，为了 提高可重用性 ，可以使用通用的总过滤器功能：

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

可以这样使用：

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

2020-07-04