Question

我在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'}
    ]
  };


}]);

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

此致

卡洛斯

Answer 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为空（没有文本）时，它的大小为零，因此它不会被渲染。

Angularjs ui-grid更改行背景颜色

1 个答案: