将数字格式化为百分比并根据数字值保留 CSS 颜色

Question

我正在使用 ng-grid 创建数据 table 并根据单元格的数值为单元格应用颜色。我还需要将这些数字显示为百分比。我已经能够应用过滤器将数字输出为百分比，但这样做会消除基于数值的着色。我怎样才能让两者一起工作？

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>

`

Answer 1

您应该在 cellText 上应用过滤器，您想要的是格式化 col 字段的输出并将其打印为百分比

<div class="ngCellText">{{row.getProperty(col.field) | percentage:100}}</div>

对比：http://plnkr.co/edit/wiKRgGK8QtNyTyrjpgg8?p=preview

Answer 2

据我所知，过滤器创建双向绑定，如果您不需要它，您可以这样定义一个单元格模板：

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[=13 获得我们自己的作用域=]

将数字格式化为百分比并根据数字值保留 CSS 颜色

Format number as percent and preserve CSS color based on number value

percentage

angularjs

ng-grid

angularjs-filter