我使用ng网格创建一个数据表，并根据单元格的数值为其应用颜色。我还需要将这些数字显示为百分比。我已经能够应用过滤器以百分比的形式输出数字，但这样做会删除基于数值的着色。我怎样才能让两者一起工作？
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>`
您应该在cellText上应用过滤器，您想要的是格式化col字段的输出并将其打印为百分比
<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>
cf：http://plnkr.co/edit/wiKRgGK8QtNyTyrjpgg8?p=preview
AFAIK，过滤器创建双向绑定，如果您不需要，您可以定义这样的单元模板：
let percentageCellTemplate = '<div class="ngCellText">{{grid.appScope.Math.round(row.entity[col.field])}}%</div>'
然后使用它：
columnDefs : [
{ field : 'continuedRate', displayName : 'continuedRate (%)', type: 'number', cellTemplate: percentageCellTemplate}
]
注意：我们用代码包装ui网格，并在我们的作用域上设置Math，因此ui网格允许我们通过访问grid.appScope来获得自己的作用域