CODEWITHSUNDEEP
angularjs
GS-Magento
GS-Magento

Reputation: 328

How to add class as per number of iteration in loop

am having three class in my style, For example red, green & blue

Showing list of items in div, My requirement is to add the class as per iteration value (sequentially). For example

1st div - red
2nd div - green 
3rd div - blue
4th div - red
5th div - green
.
.
(repeat will proceed till last iteration)
(repeat

Here is my code

<div class="card" ng-repeat="item in circularitems">
                <div class="item item-divider circularcard>
                    <b><span class="ion-ios-compose-outline larger"></span> {{item.notice_title}}</b> 
                </div>
                <div class="item item-text-wrap item-br-color-type-{{$index + 1}}-1">
                     {{item.notice}} <br><br>
                    <div class="circular-des-date">Date : {{item.event_date}}</div> 
                </div>
            </div>

Upvotes: 0

Views: 1270

Answers (3)

Kutyel
Kutyel

Reputation: 9084

Your code might be OK, you just have to change class to ng-class so that it gets evaluated by Angular.

<div ng-class="item item-text-wrap item-br-color-type-{{$index + 1}}-1">...</div>

Upvotes: 1

Hadi
Hadi

Reputation: 17289

try like this.

var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope,$filter) {
$scope.colors =[ 
     'red',
     'blue',
     'green',
     'pink'];
   $scope.items =
     [
       {name:"item1"},
       {name:"item2"},
        {name:"item3"},
        {name:"item4"},
      {name:"item4"}
    ];
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="DemoCtrl" ng-app="main">
   <div ng-repeat="n in items"   ng-style="{'background-color' : colors[$index%4]}" >
       {{n.name}}
   </div>
</div>

Upvotes: 0

AlainIb
AlainIb

Reputation: 4718

you have to use the ng-class instead of class property

ng-class="{ 'item-br-color-type-red': ($index%3)==0 , 
            'item-br-color-type-green': ($index%3)==1 , 
            'item-br-color-type-blue': ($index%3)==2 }"

Upvotes: 6

Related Questions