加载时如何动态更改表中行的颜色

Question

我正在使用 Angular 1.6。 我有一张桌子：

<table>
  <tr>
    <th>QTY</th>
    <th>PRICE</th>
    <th>TIME</th>
  </tr>
  <tr>
    <td>1</td>
    <td>20.00</td>
    <td>08:08</td>
  </tr>
  <tr>
    <td>2</td>
    <td>30.00</td>
    <td>08:08</td>
  </tr>
</table>

我需要在加载表格时，在当前时间减去交易时间小于 5 秒时将行背景颜色动态更改为黄色。

5 秒后，背景变回白色。

任何帮助或提示将不胜感激！

Answer 1

你可以在这里使用 ng-style 指令 ng-style 指令允许您有条件地在 HTML 元素上设置 CSS 样式。

你可以在你的表中使用它，如下所示

假设您在“transaction_time”中有交易交易时间，在“current_time”中有当前时间。

<table>
  <tr>
    <th>QTY</th>
    <th>PRICE</th>
    <th>TIME</th>
  </tr>
  <tr ng-repeat="trade in stockMarket track by $index" ng-style="trade.transaction_time - current_time <=5 && { 'background-color': 'yellow' } || trade.transaction_time-current_time>10 && { 'background-color': 'white'}" >
    <td>{{$index}}</td>
    <td>{{trade.amount}}</td>
    <td>{{trade.transaction_time}}</td>
  </tr>
</table>

希望对你有帮助。