如何添加類作爲每次迭代次數在循環

Question

我有我的風格三等功，例如 紅，綠&藍色

顯示在DIV的產品清單，我的要求是要添加的類別按迭代值（按順序）。例如

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

這裏是我的代碼

<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> 

Answer 1

你必須使用的ng-class代替class財產

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 }" 

Answer 2

您的代碼可能是OK，你只需要改變class到ng-class，以便通過Angular進行評估。

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

Answer 3

試試這個。

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>