Проверка угловых сеток по значению ячейки

Question

Как бы я выделил ячейку красным цветом, если gender == "male" вместо ряда. Этот код в настоящее время выделяет всю строку, но я хочу, чтобы он выделил только конкретную ячейку. Этот код взят из этого учебного пособия по сетке пользовательского интерфейса.

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer', 'ui.grid.rowEdit', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
  $scope.data = [];
  $scope.gridOptions = {
    enableGridMenu: true,
    importerDataAddCallback: function(grid, newObjects) {
      $scope.data = $scope.data.concat(newObjects);
    },
    onRegisterApi: function(gridApi) { 
      $scope.gridApi = gridApi;
      gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
    },
    data: 'data'
  };

  $scope.saveRow = function(rowEntity) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval(function() {
      if (rowEntity.Gender === 'male') {
        promise.reject();
      } else {
        promise.resolve();
      }
    }, 3000, 1);
  };

  var handleFileSelect = function(event) {
    var target = event.srcElement || event.target;

    if (target && target.files && target.files.length === 1) {
      var fileObject = target.files[0];
      $scope.gridApi.importer.importFile( fileObject );
      target.form.reset();
    }
  };
};

import.json

[
  {"name":"John Smith", "gender":"male", "company":"TestIcon"},
  {"name":"Jane Doe", "gender":"female", "company":"FastTruck"}
]

Answer 1

Если вы просто хотите динамически выделить ячейку, независимо от каких-либо элементов проверки, вы можете предоставить функцию cellClass свойство в вашем столбце определения:

{
  field: 'gender',
  cellClass: function (grid, row, col, rowIndex, colIndex) {
    var val = grid.getCellValue(row, col);
    if (val === 'male') {
      return 'blue';
    }
    else if (val === 'female') {
      return 'pink';
    }
  }
}

Для этого конкретного примера есть плункер: http://plnkr.co/edit/kbZfVKkSTKGuD9XiDz1f?p=preview и более длинная запись, если вам нужна дополнительная информация: http://brianhann.com/customize-ui-grid-with-dynamic-cell-classes/