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

Question

我是 angular 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

条件样式是使用 ng-class 或 ng-style 指令完成的。

请看一下官方文档：ng-class, ng-style.

Answer 2

试试这个：

你的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;
}

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

Change style of parent element using ng-if directive in child element

javascript

angularjs

angular-ng-if