javascript - Angularjs ui-grid change row background color -
i have code in plunker cant make work : 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:// 0 , -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 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'} ] }; }]);
the idea check status field in grid , change background color of grid.
regards
carlos
try change template this:
var rowtpl='<div><div style="height: 100%; {\'background-color\': getbkgcolortable(mydata[row.rowindex].count)}" ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.coldef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isrowheader }" ui-grid-cell></div></div>';
when div empty (has no text) size 0 doesn't rendered.
Comments
Post a Comment