每隔四個角度改變顏色js

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？對你來說很簡單。例如：

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