Question

我想根据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>

现在我要处理以下代码：

它不起作用
如果可以，我认为它将为整个表格着色，但是我只需要处理{{mount.usedPercent}} td

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

Answer 1

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

还要注意，$scope的属性和方法可在模板的表达式中访问，而不必在它们之前加上$scope。如果为它们加上$scope前缀，则实际上是在尝试访问不存在的$scope.$scope.someProperty（除非您定义它们，但是定义$scope的{{1}}属性是避免这样做，因为它会引起混乱，并使您的代码更难以理解，调试和维护。

参考2 。如果您需要在特定的$scope上放置它，只需将其放在需要的地方：

<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

ng-repeat：动态颜色表背景

1 个答案: