javascript - 使用 AngularJS 创建一个棋盘

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

您可以使用简单的 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 - 检查控制台输出)

并将其包含在 View 中，如下所示:

<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并选择您最喜欢的。