在ng-repeat中处理两行相同颜色的n个项目

Sabreena

我有一个对象数组,需要显示为列表,所需的设计是

在此处输入图片说明

我尝试了下面的代码

.odd{
    background-color: grey;
}

.even{
    background-color: #d09683;
}
<ion-audio-track track="track" ng-repeat="x in array" ng-if="track.Size!=0">
        <div class="card" ng-class="{'even':$index%2, 'odd':!($index%2)}">
            <div class="row">
              //item prints here
            </div>
          </div>
  </ion-audio-track>

但是我得到的是

在此处输入图片说明

维杰·马赫里亚(Vijay Maheriya)

请参见以下示例。

angular.module('AppModal', []).controller('OTASheetCtrl', ['$scope', function ($scope) {
  $scope.array=[1,2,3,4,5,6,7,8,9,10];
  }]);
.odd{
    background-color: grey;
}

.even{
    background-color: #d09683;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="AppModal" ng-controller="OTASheetCtrl">
<ul ng-repeat="x in array">
  <li ng-class="{'even':$index%4<=1, 'odd':$index%4<=3}">
    {{x}}
  </li>
</ul>
  </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章