Question

我有一段代码需要修复才能让它渲染出方格板。这是现在的样子：

http://i.imgur.com/Fh4pyMR.png

如您所见，第二行的第一个单元格应为蓝色。有一个转变。这是我目前的代码：

<div class="offer" ng-class-even="'even'" ng-class-odd="'odd'" ng-repeat="offer in offers">
   <label class="ellipsis"> {{offer.name}} </label>
   <div class="offer-detail">
     <label><a href="#/offers/{{offer.id}}">Voir offre</a></label>
   </div>
</div>

我尝试在ng-repeat中使用ng-if但它似乎不起作用。由于我是AngularJS的初学者，我可能错过了一些东西。

我认为我需要的是添加适当的条件来反转每一行的颜色：

1-2-3-4 => 2 and 4 are blue (even)
5-6-7-8 => 5 and 7 are blue (odd)
9-10-11-12 => and so on...

编辑：

#offer-list > div.odd {
  background-color: #ffffff;
}

#offer-list > div.even {
  background-color: rgba(0, 102, 204, 0.7);
}

Answer 1

如果它有一个未定义的行数，我不知道CSS是否可以实现这一点。

以下是如何使用JS / Angular执行此操作：在$ scope中创建一个新函数，它将在奇数行上的单元格上排0行，在偶数行上的单元格上创建行-1类

<div class="offer {{ getRow($index) }}" ng-class-even="'even'" ng-class-odd="'odd'" ng-repeat="offer in offers"> <label class="ellipsis"> {{offer.name}} </label> <div class="offer-detail"> <label><a href="#/offers/{{offer.id}}">Voir offre</a></label> </div> </div>

在您的控制器中：

var rowNb, classname; $scope.getRow = function(i){ if(i%nbCol === 0){ rowNb++; if(rowNb%2 === 0) { classname = "odd"; } else { classname = "even"; } } return "row-"+classname; }

不知道它是否会起作用，因为我无法测试它。但是我很确定你理解这里的逻辑：它会在组成奇数行的单元格上返回第0行，在偶数行上返回第1行。

然后，应用一些CSS：

.offer { background: blue; } .row-0:nth-child(odd) { background: red; } .row-1:nth-child(even) { background: red; }

随意提供一个实例，我可以帮助您实现它。

请注意，我确定它的代码很脏，但我很累。

Answer 2

您可以使用简单的Angular filter来检查给定索引是在偶数行还是奇数行中：

angular.module('...')
.filter('rowType', function () {
    // Store the number of elements per row for the filter
    var elemsPerRow = 4;

    // This gets passed in the `$index` from the scope
    return function rowType(idx) {
        // Calculate the total row: Divide index by the number of elements per row
        // and use Math.floor() to get an "integer" that works with modulo (%)
        var totalRow = Math.floor(idx / elemsPerRow);
        // Return appropriate class name in each case
        return totalRow % 2 == 0 ? 'even-row' : 'odd-row';
    };
});

（JSFiddle演示基本代码 - 检查控制台输出）

并将其包含在视图中，如下所示：

<div ng-repeat="offer in offers"
  class="offer {{$index | rowType}}"
  ng-class-odd="'odd'" ng-class-even="'even'">
    <label class="ellipsis"> {{offer.name}} </label>
    <div class="offer-detail">
        <label><a href="#/offers/{{offer.id}}">Voir offre</a></label>
    </div>
</div>

代码当然有点冗长，只是为了让您更容易看到发生了什么。然后，您可以设置如下的CSS规则：

.even-row.even, .odd-row.odd { background: blue; }
.even-row.odd, .odd-row.even { background: white; }

注意：还有一些其他更好的方法可以在元素上实际设置类，尤其是查看ngClass并选择您最喜欢的内容。

Answer 3

使用css。如果只有两行，这将有效：

.offer:nth-child(-n+4):nth-child(odd) {
    background: #ccc;
}
.offer:nth-child(n+5):nth-child(even) {
    background: #fff;
}

使用AngularJS创建一个方格板

3 个答案: