I'm using ng-grid to create a data table and apply color to cells based on their numerical value. I also need to display those numbers as percentages. I've been able to apply a filter to output the numbers as percents, but doing so wipes out the coloring based on numerical value. How can I get both to work together?
http://plnkr.co/edit/S2oYiwZex7dNw1AQAB9j?p=preview`
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{
space: "S",
week1: 0,
week2: 9,
week3: 1
}, {
space: "E",
week1: 0,
week2: 0,
week3: 0
}, {
space: "B",
week1: 4,
week2: 11,
week3: 16
}, {
space: "C",
week1: 0,
week2: 0,
week3: 0
}, {
space: "S",
week1: 0,
week2: 0,
week3: 0
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'space',
displayName: ''
}, {
field: 'week1',
displayName: '12/30',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div></div>'
}, {
field: 'week2',
displayName: '1/6',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
}, {
field: 'week3',
displayName: '1/13',
cellTemplate: '<div ng-bind="row.getProperty(col.field) | percentage:100"><div ng-class="{first: row.getProperty(col.field) <= 5}"><div ng-class="{second: row.getProperty(col.field) >= 5}"><div ng-class="{third: row.getProperty(col.field) >= 10}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div></div></div>'
},
]
};
});
app.filter('percentage', function() {
return function(input, max) {
if (isNaN(input)) {
return input;
}
return Math.floor((input * 100) / max) + '%';
};
});/*style.css*/
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px
}
.first {
background-color: #fff9f8;
color: black;
}
.second {
background-color: #ffeeeb;
color: black;
}
.third {
background-color: #ffded8;
color: black;
}<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>`
You should apply the filter on the cellText, what you want is to format the output of the col field and print it as a percentage
<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>