Question

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

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

无论如何都在这里做，而不是在我的控制器中创建一个功能？

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

Answer 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

Answer 3

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

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

在我看来，总结价值的最佳位置是控制器，其中包含以下行：

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

Answer 4

您可以随时在JS函数中执行此操作。

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

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

ng-repeat - 在html循环中计数

4 个答案: