Question

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

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评论。我仍然推荐我的初始帖子，但我创建了下面的小提琴，以展示如何通过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中使用它。

由于ng how AngularJS runs $digest cycles and dirty checking由于ngRepeat多次运行，因此使用ngRepeat增加ngInit内的变量会遇到麻烦。这更有理由将控制器用于您的逻辑。请参阅下面的fiddle作为解决问题的方法。

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>

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

1 个答案:

被修改