如何在ng-repeat中使用ng-if來應用css類

Question

我想在我的有效條件中添加一個類到我的tr上，就像daydate是「Sunday」一樣只有我想添加class「red-text 「

<tr ng-repeat="atten in attendList.attendance" ng-if="atten.daydate == 'Sunday'" class="red-text"> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;" >{{ atten.attenDate }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.daydate }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.intime }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.outtime }}</td> 
      </tr> 

但無法得到的結果

謝謝

Answer 1

刪除NG-如果&使用納克級這樣

ng-class="{'red-text': atten.daydate == 'Sunday'}" 

Answer 2

使用納克級這樣

ng-class="{'red-text': atten.daydate == 'Sunday'}"

<tr ng-repeat="atten in attendList.attendance" ng-if="atten.daydate == 'Sunday'" ng-class="{'red-text': atten.daydate == 'Sunday'}"> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;" >{{ atten.attenDate }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.daydate }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.intime }}</td> 
       <td class="custom-icon-size text-font" style="border-left: 1px solid #e8eaf6;">{{ atten.outtime }}</td> 
      </tr> 

Answer 3

你不需要ng-如果可以的話就可以使它工作。

ng-class={'red-text': atten.daydate === 'Sunday'} 

您還可以添加更多的項目到納克級的其他日子，如果你想這樣的：

ng-class={'red-text': attendaydate === 'Sunday', 'blue-text': 'attendaydate === 'Monday', 'green-text': attendaydate === 'Tuesday'} 

NG-如果不需要在所有的類都只能基於應用您提供給ng-class屬性的陳述的真實性。