Javascript 在AngularJS模板中增加一个变量

首先，我要说我对AngularJS很陌生，所以如果我的思维方式远离基础，请原谅我。我正在使用AngularJS编写一个非常简单的单页报告应用程序，“肉和土豆”当然是使用AngularJS模板系统来生成报告。我有很多报告，我正在从类似Jinja的语法转换过来，我很难复制任何类型的计数器或运行制表功能

前

在我的控制器中，我定义了一个变量，如

$scope.total=0然后我可以在模板内部访问它而不会出现问题。我不太明白的是如何从
ng repeat
元素中增加这个
total
。我可以想象这会是什么样子-

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



{{foo.baz}}-{{total=total+foo.baz}}


{{total}}

这显然不起作用，类似于
{{{total+foo.baz}}
，提前感谢您的建议。
我不确定我是否完全理解这个问题，但是否只需要显示您迭代的对象中的总数？只需将
$scope.total
设置为数组的长度（
bar
，在上面的示例中）。因此，
$scope.total=$scope.bar.length

如果需要所有
foo.baz
属性的总和，只需在控制器中计算即可

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

如果您只需要一个计数器（根据您的第一个代码示例），请查看$index，它包含包含重复项中的当前（基于0的）索引。然后只显示总长度的数组长度

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



项目编号：{{$index+1}


{{items.length}}items

如果您想在重复的项目中获得某个特定字段的总数，比如说价格，您可以使用过滤器，如下所示

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



价格：{{item.Price}}


总价：{{items | totalPrice}}

和过滤器功能：

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

app.filter（“totalPrice”，函数（）{
返回函数（项目）{
var总计=0，i=0；
对于（i=0；i

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

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

app.filter（“总计”，函数（）{
返回函数（项目、字段）{
var总计=0，i=0；
对于（i=0；i

其使用方式如下：

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

总价：{{items}总价：'price'}
我需要的是运行总计，而不是普通总计，因此我在@TimStewart留下的内容上添加了内容。代码如下：

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

app.filter（“runningTotal”，函数（）{
返回函数（项目、字段、索引）{
var总计=0，i=0；
对于（i=0；i

要在列中使用它，只需执行以下操作：

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

总价：{{items | runningTotal:'price'：$index}
第二个例子正是我想要的！非常感谢。使用通用的total filter函数，字段应该是返回函数的参数，而不是筛选器本身（否则Angular会抱怨它是未知的提供程序），即
app.filter（“total”，function（）{/code>和
返回函数（项，字段）{
从报告的角度来看，这并没有多大意义。在许多情况下，在处理模板之前预处理报告数据中的所有总计是不可能的。运行totalAddition运算符的非常优雅的解决方案是不明确的，但减法强制将类型转换为数字。
{count--1}