ng-repeat: цвет таблицы динамически - PullRequest
Новая
       14

ng-repeat: цвет таблицы динамически

0 голосов
/ 15 сентября 2018

Я хочу установить фон в ячейке таблицы в соответствии со значением, полученным из 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 Ответ

0 голосов
/ 15 сентября 2018

Ссылка 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>
...