ng-repeat - 在 html 循环中计数答案

【问题标题】：ng-repeat - count within html loopng-repeat - 在 html 循环中计数
【发布时间】：2017-05-15 05:55:06
【问题描述】：

无论如何都要计算一个项目，然后在循环之外显示它？

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

我尝试使用 ng-init() 没有成功，因为我认为它每次都压倒一切。

<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>

有没有办法在这里做，而不在我的控制器中创建一个函数？

【问题讨论】：

嗯，这是可能的，答案说明了如何，但是您认为应该在模板中进行这样的计算吗？
感谢您的提问..我想知道如何实现..
@Alias stackoverflow.com/questions/22731145/… - 查看这篇文章

标签： javascript angularjs

【解决方案1】：

在 ng-repeat 中初始化的total 的作用域不同，不能在循环外访问。

试试这个：

<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>

【讨论】：

【解决方案2】：

您可以使用 $parent 表示法在 ng-repeat 范围内访问 $scope 变量（从 ng-repeat 外部）。所以现在初始化后它会计算总数并将其存储在外部初始化的 $scope 变量中。

代码：

<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

【讨论】：

【解决方案3】：

虽然它们看起来确实很相似，ngRepeat 在命令式编程语言中却不像 for 循环那样工作。 ngRepeat 指令由两个单独运行的步骤组成。首先，它产生一个数组/一个带有重复值的映射。其次，它为每个重复值呈现模板（带有ngRepeat 的元素内的元素）。然而，它不像命令式编程语言那样迭代代码块。

即使您可以使用$parent.total 实现您尝试做的事情，但一旦您的数组内容发生变化，您可能会在此解决方案中遇到其他陷阱。简而言之，您应该找到另一种方法来总结数组中的值。

在我看来，总结这些值的最佳位置是带有这样一行的控制器：

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

【讨论】：

【解决方案4】：

你总是可以在你的 JS 函数中这样做。

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

工作人员： http://plnkr.co/edit/5WZ9alCXzq115wi3xl4B?p=preview

【讨论】：