在 ng-repeat 中为 n 个项目处理具有相同颜色的两行答案

【问题标题】：Handling two rows in ng-repeat with same colour for n items在 ng-repeat 中为 n 个项目处理具有相同颜色的两行
【发布时间】：2017-01-10 19:00:57
【问题描述】：

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

我试过下面的代码

.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>

但我得到的是

【问题讨论】：

标签： html css angularjs-ng-repeat

【解决方案1】：

这是另一种解决方案：

div.card {
    background-color: grey;
}

div.card:nth-child(4n), div.card:nth-child(4n-1) {
    background-color: #d09683;
}

【讨论】：

谢谢，工作正常，但我对每一行都有一些复杂的条件，因为我无法使用这个答案！

【解决方案2】：

首先，我们将为所有列表项应用一个background-color。

ul li {
  background: blue;
}

在第二步中，我们将使用 2 个 CSS 选择器来覆盖背景通过创建一个偶数模式来添加特定列表项：

ul li:nth-child(4n + 1),
ul li:nth-child(4n + 2) {
  background: green;
}

图像输出：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  background: blue;
  margin-bottom: 10px;
  padding: 5px 10px;
  color: white;
}

ul li:nth-child(4n + 1),
ul li:nth-child(4n + 2) {
  background: green;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

【讨论】：

@Sabreena 在哪个浏览器中？
@Sabreena 在所有基于 Windows 的浏览器中，它都可以正常工作。你能提供更多细节吗？

【解决方案3】：

见下面的例子。

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>

【讨论】：

【解决方案4】：

检查一下

tr:nth-child(4n+1), tr:nth-child(4n+2) {
 background-color: red;
}
tr {
 background-color: grey;
}

check fiddle example

【讨论】：