ng-repeat - 在html循環中計數

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

total其以ng重複初始化將是不同的範圍，並且不能在循環外訪問。

試試這個：

<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指令由兩個獨立運行的步驟組成。首先，它會生成一個包含repeatet值的數組/地圖。其次，它爲每個repeatet值呈現模板（元素中的元素爲ngRepeat）。但是它不會像命令式編程語言那樣迭代代碼塊。

儘管您可能會通過$parent.total實現您的目標，但只要數組內容發生更改，您就可能會遇到此解決方案的其他缺陷。爲了簡化它，你應該找另一種方法來總結數組中的值。

在我看來，要總結的值最好的地方是，像這樣的線路控制器：在你的JS功能

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

Answer 4

你總是可以做到這一點。

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

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