Angularjs ui-grid 更改行背景颜色答案

【问题标题】：Angularjs ui-grid change row background colorAngularjs ui-grid 更改行背景颜色
【发布时间】：2015-01-16 20:58:17
【问题描述】：

我在 plunker 中有这段代码，我无法让它工作：plunker

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.myData = [{sv_name: "Moroni", sv_code: 50,count:0},
                 {sv_name: "Tiancum", sv_code: 43,count:1},
                 {sv_name: "Jacob", sv_code: 27,count:0},
                 {sv_name: "Nephi", sv_code: 29,count:7},
                 {sv_name: "Enos", sv_code: 34,count:0}];

   $scope.getBkgColorTable = function (saveStatus) {
                switch (saveStatus) {
                    case -1:
                        return "";
                        break;
                    case 0:
                        return "#dff0d8";
                        break;
                    default:// anything but 0 and -1, alerts
                        return "#f2dede";
                }
            };

  //ng-class="{\'green\':true, \'red\':row.entity.count==0 }"
  var rowtpl='<div><div style="{\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',

    rowTemplate:rowtpl,
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre',},
      { field: 'sv_code', displayName: 'Placa'},
      { field: 'count'}
    ]
  };


}]);

这个想法是检查网格中的状态字段并更改网格的背景颜色。

问候

卡洛斯

【问题讨论】：

标签： javascript css angularjs angular-ui-grid

【解决方案1】：

尝试将模板更改为：

 var rowtpl='<div><div style="height: 100%; {\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

当 div 为空（没有文本）时，它的大小为零，因此不会呈现。

【讨论】：