在子元素中使用ng-if指令更改父元素的樣式

Question

我是新的角js。根據條件，我更改單元格的背景。但是如果我能改變整條線的背景，我將不僅僅是快樂。
下面是代碼示例：

<table> 
    <thead> 
     <tr> 
      <td> 
       Status 
      </td> 
      <td> 
       Time waiting 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in filteredAgentsDetailedArr"> 
      <td ng-if="item.name == 'Not Logged'"> 
       {{ item.name }} 
      </td> 
      <td ng-if="item.name == 'In Call'" 
       ng-style="{backgroundColor: 'green'}"> 
       {{ item.name }} 
      </td> 
      <td ng-if="item.name == 'Waiting'" 
       ng-style="{backgroundColor: 'red'}"> 
       {{ item.name }} 
      </td> 

      <td ng-if="item.time_waiting[6] < 3 && item.time_waiting[4] == 0" 
       ng-style="{backgroundColor: 'yellow'}"> 
       {{ item.time_waiting }} 
      </td> 
      <td ng-if="item.time_waiting[6] >= 3 && item.time_waiting[4] < 2 || 
         item.time_waiting[4] == 1 && item.time_waiting[3] == 0" 
       ng-style="{backgroundColor: 'gold'}"> 
       {{ item.time_waiting }} 
      <td> 
     </tr> 
    </tbody> 
</table> 

也就是說，一切正常。但是我想爲整個字符串添加一個樣式（或者可能是ng-class）而不是一個單元格。也許有人知道如何使用ng-if指令來實現這一點？
提前致謝！）

Answer 1

試試這個：

你的HTML

<table> 
<thead> 
    <tr> 
     <td> 
      Status 
     </td> 
     <td> 
      Time waiting 
     </td> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="item in filteredAgentsDetailedArr" 
     ng-class="{ 'incall' : item.name == 'In Call', 'waiting' : item.name == 'Waiting'}"> 
     <td ng-if="item.name == 'Not Logged'"> 
      {{ item.name }} 
     </td> 
     <td ng-if="item.name == 'In Call'"> 
      {{ item.name }} 
     </td> 
     <td ng-if="item.name == 'Waiting'"> 
      {{ item.name }} 
     </td> 

     <td > 
     <span ng-if="item.time_waiting[6] < 3 && item.time_waiting[4] == 0" 
       ng-style="{backgroundColor: 'yellow'}"> 
      {{ item.time_waiting }} 
     </span> 
     </td> 
    </tr> 
</tbody> 

在你的CSS

table { 
    border-collapse:collapse; 
} 

.incall { 
    background-color: green; 
} 

.waiting { 
    background-color: red; 
} 

Answer 2

有條件的造型使用ng-class或ng-style指令完成。

查看官方文檔：ng-class，ng-style。