Angularjs 每四个div后更改颜色

我正在开发一款使用angular js和ionic的移动应用程序。我无法更改div的颜色。我希望每个div都有不同的颜色，并且每四个div后颜色都会重复

代码如下：

 <div class="card">
        <div class="custom_row">
        <div class="col-32-custom"  ng-repeat="services in services_data track by $index">


        <div ng-if="($index+1)%2==0"class="brand-content wow fadeIn animated" data-wow-duration="700ms" data-wow-delay="300ms" style="visibility: visible; animation-duration: 700ms; animation-delay: 300ms; animation-name: fadeIn;">
        <div class="service_cover" style="
    width: 100%;
    text-align: center;
">
                                <img class="pull-left img-responsive bright" src="http://incitysearch.com/themes/web/images/app/{{services.icons}}" alt="">
                                </div>
                                <div class="media-body" style="padding-bottom:25px;">                           
                                    <h2 class="align_center">{{services.name}}</h2>
                        <p class="align_center_des">{{services.description}}</p>                                            
                                       <a href="#job/{{services.id}}">
                                 <span class="select_btn ">

                                    <input type="radio" ng-model="$parent.name" name="name" value="{{services.name}}" class="btn btn-submit service " style="opacity:0;"  />
                                    <label for="radio1" style="color:white;margin-left:-5px;"><span><span></span></span>Select</label></a></span>




                                </div>
                            </div>



                            <div ng-if="($index+1)%2!=0"class="brand-content wow fadeIn animated" data-wow-duration="700ms" data-wow-delay="300ms" style="visibility: visible; animation-duration: 700ms; animation-delay: 300ms; animation-name: fadeIn;background-color:black;">
        <div class="service_cover" style="
    width: 100%;
    text-align: center;
">
                                <img class="pull-left img-responsive bright" src="http://incitysearch.com/themes/web/images/app/{{services.icons}}" alt="">
                                </div>
                                <div class="media-body" style="padding-bottom:25px;">                           
                                    <h2 class="align_center">{{services.name}}</h2>
                        <p class="align_center_des">{{services.description}}</p>                                            
                                       <a href="#job/{{services.id}}">
                                 <span class="select_btn ">

                                    <input type="radio" ng-model="$parent.name" name="name" value="{{services.name}}" class="btn btn-submit service " style="opacity:0;"  />
                                    <label for="radio1" style="color:white;margin-left:-5px;"><span><span></span></span>Select</label></a></span>




                                </div>
                            </div>

{{services.name}
{{services.description}}
{{services.name}
{{services.description}}

这是小提琴：

---

您可以使用

ng class

更改基于

$index

值的css类。像这样的事情从我的头顶上消失了。这至少可以为您指明正确的方向

ng-class="{'0': 'blue', '1': 'red', '2': 'green', '3': 'yellow'}[$index % 4]"

---

您可以使用

ng class

更改基于

$index

值的css类。像这样的事情从我的头顶上消失了。这至少可以为您指明正确的方向

ng-class="{'0': 'blue', '1': 'red', '2': 'green', '3': 'yellow'}[$index % 4]"

---

CSS呢？对你来说很简单。e、 g:

.your-class:nth-child(4){
  background-color: #FFF;
}

---

CSS呢？对你来说很简单。e、 g:

.your-class:nth-child(4){
  background-color: #FFF;
}

---

您可以尝试将ng if指令与条件“num%4”一起使用。您可以尝试将ng if指令与条件“num%4”一起使用