Question

我正在使用角度js和离子来开发移动应用程序。我有改变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>

这是小提琴： https://jsfiddle.net/t8666av0/

Answer 1

您可以使用ng-class更改基于$index值的css类。像这样的东西从我的头顶开始。这应该至少指向正确的方向。

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

Answer 2

CSS怎么样？对你来说很简单。 e.g：

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

每四个div角度js后改变颜色

2 个答案: