ng-repeat：动态颜色 table 背景

Question

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

<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>

现在我必须解决这段代码的问题：

没用
如果可行，我假设它会为整个 table 着色，但我只需要处理 {{mount.usedPercent}} td

在 angular 中实现此目标的实用方法是什么？

Answer 1

参考 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>

ng-repeat：动态颜色 table 背景

ng-repeat: Color table background dynamically

html

angularjs

angularjs-ng-repeat