CODEWITHSUNDEEP
javascriptangularjs
akila arasan
akila arasan

Reputation: 747

Modify $index value after each iteration in ng-repeat

My requirement is to increment the $index value after each iteration of ng-repeat in angularjs.I tried incrementing using ng-init like this, but it didn't work and it is incremented at the start of the ng-repeat.Could anyone help me with this?

   

 <div class ="row" ng-repeat ="offer in offers track by $index" ng-init="$index=$index+5">
    <div class="col-md-6">
   <span>offers[$index].title</span>
    <span>offers[$index+1].title</span></div>
    <div class="col-md-4"><span>offers[$index+2].title</span>
    <span>offers[$index+3].title</span>
    <span>offers[$index+4].title</span></div>
    </div>

The problem I use a row that alternatively displays two title in the first row and in the second row it displays the title of other three offers.The first iteration prints the title in order.But in the second iteration it duplicates the data as $index value is 2.So I need to manipulate the $index value so that it displays the title in order.

Upvotes: 1

Views: 671

Answers (2)

Mamun
Mamun

Reputation: 68933

Try the following:

var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
  $scope.offers = [{title: 'Title 1'},{title: 'Title 2'},{title: 'Title 3'}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController'>
  <div ng-repeat ="offer in offers">
    <span>{{offers[$index + 0].title}}</span>
  </div>
</div>

Upvotes: 1

Ashish Kadam
Ashish Kadam

Reputation: 1487

AngularJs Provide index value for every iteration, you can use that index value and change your count.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
Count =  {{count}}
<h1 ng-repeat="x in records  track by $index">{{x}} {{$index}} Count : {{count+$index}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.count = 5;	

  $scope.records = [
    "Iteration : ",
	"Iteration : ",
  	"Iteration : ",
	"Iteration : ",
  ]
});
</script>

</body>
</html>

Chech That AngularJs Doc Link

Upvotes: 1

Related Questions