Ändern Sie den Stil des übergeordneten Elements mit ng-if-Anweisung im untergeordneten Element

Question

Ich bin neu in eckigen js. Abhängig von den Bedingungen ändere ich den Hintergrund der Zellen. Aber ich werde mehr als nur glücklich sein, wenn ich den Hintergrund der ganzen Linie ändern kann.
Hier ist ein Beispiel für den Code:

<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> 

Das heißt, funktioniert alles. Aber ich würde gerne einen Stil (oder vielleicht ng-Klasse) zu der gesamten Zeichenfolge und nicht zu einer Zelle hinzufügen. Vielleicht weiß jemand, wie dies mit der ng-if-Anweisung umgesetzt werden kann?
Vielen Dank im Voraus!)

Answer 1

Versuchen Sie dies:

Ihre 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> 

Auf Ihrem css

table { 
    border-collapse:collapse; 
} 

.incall { 
    background-color: green; 
} 

.waiting { 
    background-color: red; 
} 

Answer 2

Conditional Styling ist die ng-class oder die ng-style Richtlinien durchgeführt werden.

Schauen Sie sich die offizielle Dokumentation an: ng-class, ng-style.