如何在AngularJS中显示基于各种条件的ng网格单元数据

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

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

但我必须根据条件在一个单元格中显示多种颜色，我的目标图像将是
在本例中，moroni将根据条件显示两个彩色按钮。

看看这个

颜色条在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>'
    }]
  };

var-app=angular.module（'myApp'，['ngGrid']）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.myData=[{
姓名：“莫罗尼”，
状态1：正确
}, {
名称：“天香”，
状态1：错误，
状态2：正确，
状态3：错误
}, {
姓名：“雅各布”，
状态1：正确，
状态2：正确，
状态3：错误
}, {
名称：“尼菲”，
状态1：错误，
状态2：正确，
状态3：正确
}, {
名称：“Enos”，
状态1：正确，
状态2：正确，
状态3：正确
}];
$scope.gridOptions={
数据：“myData”，
行高：40，
columnDefs：[{
字段：“名称”，
displayName:'名称'
}, {
字段：“rgb”，
displayName:“年龄”，
单元格模板：“”+
'' +
''
}]
};

正如你所看到的，我只使用了三种状态和相应的颜色条，因为现在是星期一，我仍然很疲倦和懒惰。：-）

---

还要注意的是，我调整了

行高

以适应一个单元格中的所有条。在使用高度、边距和填充调整css后，你也应该这样做。

你能显示你的代码吗？我是angularjs的新手，现在我只有演示网格，我必须根据网格中特定单元格的条件显示这些颜色。可能是我的answe从这里开始的r将有帮助：看看Plunker。是的，但我必须根据颜色必须显示的条件，在单个单元格中显示所有行的所有颜色。很难想象你想要什么。你能画一幅图吗？你的答案可以接受，但我需要检查id数据，它是动态的，所以我如何才能设置真或假，我如何才能检查d非常感谢你的指导。