如何按循环中的迭代次数添加类 [英] How to add class as per number of iteration in loop

问题描述

我在我的风格中有三个班级，例如红色，绿色和蓝色

在div中显示项目列表，我的要求是按迭代值(顺序)添加类.例如

  1st div-红色第二分区-绿色3rd div-蓝色第4格-红色5th div-绿色..(重复将进行到最后一次迭代)(重复 

这是我的代码

 < div class ="card" ng-repeat =圆形项目中的项目">< div class ="item item-divider circlecard>< b>< span class ="ion-ios-compose-outline large"</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">日期:{{item.event_date}}</div></div></div> 

解决方案

您必须使用 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} 

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>

解决方案

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

这篇关于如何按循环中的迭代次数添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！