0

我在 HTML 页面中有一个网格显示，在网格中显示动态数据，我想在网格中每一行的第三个单元格中显示 7 种颜色，根据我必须显示颜色的条件，我正在使用 if 条件进行检查颜色的条件。我如何根据角度条件在每行网格的第三个单元格中显示颜色。在下面的 pluker 例如代码中

`http://plnkr.co/edit/AM6JuSXZCQ9NkYpbBSUU?p=preview,`

但是我必须根据条件在单个单元格中显示多种颜色，我的目标图像将目标图像
在此用于 moroni 根据条件显示 2 个颜色按钮。

4

1 回答 1

1

看看这个Plunker

颜色条在 css 中定义，并应用于数据范围内的一些状态变量。

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    name: "Moroni",
    state1: true
  }, {
    name: "Tiancum",
    state1: false,
    state2: true,
    state3: false
  }, {
    name: "Jacob",
    state1: true,
    state2: true,
    state3: false
  }, {
    name: "Nephi",
    state1: false,
    state2: true,
    state3: true
  }, {
    name: "Enos",
    state1: true,
    state2: true,
    state3: true
  }];
  $scope.gridOptions = {
    data: 'myData',
    rowHeight: 40,
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field: 'rgb',
      displayName: 'Age',
      cellTemplate: '<div ng-class="{redbar: row.entity.state1,whitebar:!row.entity.state1}" ></div>' +
        '<div ng-class="{greenbar: row.entity.state2,whitebar:!row.entity.state2}" ></div>' +
        '<div ng-class="{bluebar: row.entity.state3,whitebar:!row.entity.state3}" ></div>'
    }]
  };

正如你所看到的，我只使用了三个状态和各自的颜色条，因为它是星期一，我仍然很累和懒惰。:-)

另请注意，我调整了rowHeight以适应一个单元格中的所有条形。在使用高度、边距和填充调整 css 之后，您也应该这样做。

于 2014-08-04T08:46:21.733 回答