使用 Angular JS 为 UI 网格中行内的行提供不同的配色方案 (odd/even)

Question

我正在尝试将一行分成两行，即。 Angular JS UI 网格中的行跨度。我无法找到如何做 this.I 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 
}

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

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

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

很抱歉用这种颜色强调解决方案，但至少很清楚这是怎么回事。

使用 Angular JS 为 UI 网格中行内的行提供不同的配色方案 (odd/even)

giving different color scheme to (odd/even) for rows within rows in UI grid using Angular JS

css

angularjs

angular-ui-bootstrap

angular-ui-grid