Reinitialize a ng-init variable in a ng-repeat loop

Question

Below is my code for a simple loop of AngularJS, with initializing c=1 initially. Based on the condition, value of c needs to be updated in the subsequent iterations. For example, let's assume <some other condition> evaluates to be true in the first 3 iterations and <some condition> evaluates to be true in the last iteration, then the output expected is :

1 to 11

11 to 21

21 to 31

31

So basically, what is required is condition that needs to be put in HTML comment place below.

<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

Edited

New Fiddle for comment by Claies. I still recommend my initial post but I created the Fiddle below to show how to accomplish the task via HTML and minimal JS.

This uses ngInits to change C. The key thing here is since ngRepeats create a separate scope, changing C within the ngIf will not apply to the entire scope. To do this, we create a local copy in the ngInit to use for display purposes and then call a function to change C on the global scope layer which is then used in subsequent iterations of the 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> 

As everyone has stated in the comments, this business logic should be executed in the controller. The structure of your HTML is basically a for-loop with two conditions to check for within it. Therefore, you can easily do this within the controller. Set c to be a variable in the scope: $scope.c = ... and then use it in the HTML/JS as needed.

You're going to run into trouble using an ngRepeat to increment variables inside of an ngInit since the ngRepeat is run multiple times due to how AngularJS runs $digest cycles and dirty checking . This is even more of a reason to use the controller for your logic. Please see below a fiddle as a solution for your problem.

 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>