2

我有一段代码需要修复以使其呈现方格板。这是它现在的样子：

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);
}
4

3 回答 3

1

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

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

于 2014-10-29T19:24:36.047 回答
1

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

以下是使用 JS/Angular 的方法：在 $scope 中创建一个新函数，该函数将对奇数行的单元格进行 row-0 分类，对偶数行的单元格进行 row-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;
}

随意提供一个活生生的例子，所以我可以帮助你实现它。

请注意，我很确定这是脏代码，但我很累。

于 2014-10-29T15:55:42.187 回答
-1

使用 CSS。如果只有两行，这将起作用：

.offer:nth-child(-n+4):nth-child(odd) {
    background: #ccc;
}
.offer:nth-child(n+5):nth-child(even) {
    background: #fff;
}
于 2014-10-29T15:16:27.533 回答