在ng-repeat循环中重新初始化ng-init变量

Question

下面是我的AngularJS简单循环的代码，最初初始化c = 1。 根据条件，需要在后续迭代中更新c值。 例如，假设<some other condition>在前3个迭代中评估为true，而<some condition>在最后一次迭代中评估为true，则预期输出为：

1至11

11至21

21至31

31

因此，基本上，所需的条件是需要放在下面的HTML注释位置。

<div  ng-repeat="x in [1,2,3,4]" ng-init="c=1">
        <div ng-if="<some condition>">
              {{c}}
           <!-- need to update c=c+1 here-->
        </div>

        <div ng-if="<some other condition>">
             {{c}} to {{c+10)}}
             <!-- need to update c=c+10 here-->
        </div>
</div>

Answer 1

已编辑

新提琴供Claies评论。 我仍然推荐我的第一篇文章，但是我在下面创建了Fiddle，以展示如何通过HTML和最小的JS完成任务。

这使用ngInits来更改C。此处的关键是因为ngRepeats创建了一个单独的作用域，因此在ngIf中更改C不会应用于整个作用域。 为此，我们在ngInit中创建一个本地副本以用于显示目的，然后调用一个函数来更改全局作用域层上的C，然后将其用于ngRepeat的后续迭代中。

 var app = angular.module('myApp', []); app.controller('Ctrl', ['$scope', function($scope) { $scope.arr = [1, 2, 3, 4]; $scope.c = 1; $scope.changeC = function(increment) { $scope.c = $scope.c + increment; } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="Ctrl"> <div ng-repeat="item in arr"> <!-- CONDITION #1 --> <!-- TEST CASE : IS ITEM EVEN? --> <div ng-if="item % 2 == 1" ng-init="localC = c; changeC(1);"> {{localC}} to {{localC+1}} </div> <!-- CONDITION #2 --> <!-- TEST CASE : IS ITEM ODD? --> <div ng-if="item % 2 == 0" ng-init="localC = c; changeC(10);"> {{localC}} to {{localC+10}} </div> </div> </div> </div> 

正如每个人都在评论中指出的那样，此业务逻辑应在控制器中执行。 HTML的结构基本上是一个for循环，其中有两个要检查的条件。 因此，您可以轻松地在控制器中执行此操作。 将c设置为范围内的变量： $scope.c = ... ，然后根据需要在HTML / JS中使用它。

使用ngRepeat来增加ngInit内部的变量会遇到麻烦，因为AngRepJS 如何运行$ digest循环和脏检查，因此ngRepeat多次运行 。 这甚至是将控制器用于您的逻辑的一个原因。 请参阅下面的小提琴作为解决问题的方法。

 var app = angular.module('myApp', []); app.controller('Ctrl',['$scope',function($scope) { $scope.arr = [1,2,3,4]; $scope.c = 0; for(var i = 0, iMax = $scope.arr.length; i < iMax; i++) { var curr = $scope.arr[i]; // Put first condition here if(curr == 1) { $scope.c += 1; } // Put second condition here if(curr == 2) { $scope.c += 10; } } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="Ctrl"> {{c}} </div> </div>