我正在使用ng-grid创建数据表,并根据其数值将颜色应用于单元格。我还需要将这些数字显示为百分比。我已经能够应用过滤器将数字输出为百分比,但这样做会根据数值消除颜色。我怎样才能让两者一起工作?
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>
`
答案 0 :(得分:1)
你应该在cellText上应用过滤器,你想要的是格式化col字段的输出并将其打印为百分比
<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>
答案 1 :(得分:0)
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-grid并在我们的范围上设置Math,因此ui-grid允许我们通过访问grid.appScope
来获得我们自己的范围