CODEWITHSUNDEEP
angularjs
Omprakash Sharma
Omprakash Sharma

Reputation: 439

pass index to ng-class with ng-repeat

I want to increment class sequence with ng-repeat. My requirement meets like 

<div class="c1">image1</div>
<div class="c2">image2</div>
<div class="c3">image3</div>
......................
<div class="cN">imageN</div>

I tried to reduce this as

<div ng-class="{'c':{{imgNo}}}" ng-repeat="imgNo in imgNos">Image{{imgNo}}</div>

or

<div ng-class="{'c[$index]':isTrue}" ng-repeat="imgNo in imgNos">Image{{imgNo}}</div>

Please help me with the correct way. Thanks

Upvotes: 1

Views: 810

Answers (4)

Lasith
Lasith

Reputation: 565

You can use

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Try this

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

DEMO

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14689

You don't need to specify or use $index over here because you already have imgNo field and you use in div text, you can also append same name in class:

<div class="c{{imgNo}}" ng-repeat="imgNo in ImgNos">Image{{imgNo}}</div>

Upvotes: 0

Hadi
Hadi

Reputation: 17299

Try like this.

angular.module('app',[])
.controller('ctrl',function($scope){
    $scope.List = [
        {Name : '1'},
        {Name : '2'},
        {Name : '3'},
        {Name : '4'},
        {Name : '5'}
    ];
    
   
});
.c0{
  color:red;
  }

.c1{
  color:blue;
  }

.c2{
  color:green;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="category in List" ng-class="'c'+{{$index}}">
       {{category.Name}}
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions