ng-repeat：动态颜色表背景

Posted 2021-04-09

我想根据ng-repeat产生的值在表格的单元格中设置背景。到目前为止，我有以下代码：

<table id="myTableDisk" width="100%" border="1">
  <tbody>
    <tr>
      <th scope="col">Mount</th>
      <th scope="col">Size</th>
      <th scope="col">Used</th>
      <th scope="col">Free</th>
      <th scope="col">Use %</th>
    </tr>
    <tr ng-repeat="mount in msg.payload"
        ng-style="{backgroundColor: $scope.getBackgroundColor(mount.usedPercent)}"
        $scope.getBackgroundColor(value) {
            if(value <= 75)
              return 'red';
            if(value > 90)
              return 'blue';
            return 'black'
    }>
      <th align="left" scope="row">{{mount.mount}}</th>
      <td align="right">{{mount.size}}</td>
      <td align="right">{{mount.used}}</td>
      <td align="right">{{mount.available}}</td>
      <td align="right">{{mount.usedPercent}}</td>
    </tr>
  </tbody>
</table>

现在我不得不解决这段代码：

1. 这是行不通的
2. 如果它可以工作，我认为它会为整个表着色，但我需要只在{{mount.usedPercent}} td上工作

以角度实现这一目标的实用方法是什么？

答案

参考1.您应该在控制器中定义$scope.getBackgroundColor()函数，而不是在模板中。

另请注意，$scope属性和方法可以在模板的表达式中访问，而不必使用$scope作为前缀。如果你用$scope作为前缀，你实际上是在尝试访问不存在的$scope.$scope.someProperty（除非你定义它们，但是要避免定义$scope的$scope属性，因为它会产生混淆并使你的代码更难理解，调试和维护）。

参考2.如果你需要在特定的<td>上，只需将它放在你需要的地方：

<tr ng-repeat="mount in msg.payload">
  <th align="left" scope="row">{{mount.mount}}</th>
  <td align="right">{{mount.size}}</td>
  <td align="right">{{mount.used}}</td>
  <td align="right">{{mount.available}}</td>
  <td align="right" 
      ng-style="{backgroundColor: getBackgroundColor(mount.usedPercent)}"
  >{{mount.usedPercent}}</td>
</tr>

如果你真的想在模板中定义someProperty，你绝对不应该在ng-repeat中进行它（因为它意味着你在ng-repeat的每次迭代中覆盖它并且这是非常低效的）。 但请记住，在模板中定义范围属性会使您的代码难以维护，如果您的应用程序变得复杂并且您在很多地方执行此操作;很快你就无法弄清楚定义的内容和位置：

{{getBackgroundColor = value => value <= 75 ? 'red' : value > 90 ? 'blue' : 'black'}}
<table>
  <tr ng-repeat="mount in msg.payload">
    ...
    <td ng-style="{backgroundColor: getBackgroundColor(mount.usedPercent)}">
      {{mount.usedPercent}}</td>
  </tr>
</table>