使用Angular JS为UI网格中的行内的行提供不同的颜色方案（奇数/偶数）

Question

我试图将一行划分为两个即。 Angular JS UI Grid中的行跨度。我无法找到如何做到这一点。我需要为UI网格行中的行设置不同的颜色方案。 Plunker代码是 http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {
        rowHeight:50,
        columnDefs: [
          { field: 'name' },
          { field: 'phoneList', name: 'Phone Numbers', cellTemplate:'<div ng-repeat="item in row.entity[col.field]">{{item}}</div>'}
        ],
         enableColumnResizing: true
      };

      $http.get('data.json')
      .success(function (data) {
        $scope.gridOptions.data = data;
      });

}]);

Answer 1

您可以将:nth-child css选择器与even和odd一起使用，如下所示：

.phonenumber:nth-child(even) {
  background: red
}

.phonenumber:nth-child(odd) {
  background: green 
}

我还将课程phonenumber添加到您的模板中：

cellTemplate:'<div class="phonenumber" ng-repeat="item in row.entity[col.field]">{{item}}</div>'

Plunker：http://plnkr.co/edit/CozqxvfmkhDzBBEeHcJ0?p=preview

很抱歉用这种颜色强调解决方案，但至少很清楚这种情况会发生什么。