ng-repeat內條件格式/樣式

Question

我想要一個方式來爲HTML表格提供一個條件格式（一個簡單的背景顏色）與AngularJS控制器的結果。這將有希望發生在ng-repeat迭代期間，因爲它通過數組中的元素工作。

我想完成的是：每當控制器內部的函數返回true時，背景或樣式是綠色的，當它不是時，它將是紅色的。

在插入點的註釋中尋找「開始問題」。

 <!-- PLAYER STATS TABLE --> 
    <div id = "StatsListTable"> 
    <table border="1" style="width:80%"> 
    <tr> <!-- TODO: class="tr.pstats" --> 
     <th>Character Name</th> 
     <th>  
      <div ng-app="KIdash" ng-controller="controller"> 
      Total Matches: {{TotalMatchesFunc()}} :: {{GreaterWins()}} 
      </div> 
     </th> 
     <th class="green">Wins</th> 
     <th class="red">Losses</th> 
    </tr> 
     <tr ng-repeat="ps in PlayerStats" class = "playerStatTable"> 
      <td>{{ps.name}}</td> 
      <td>{{ps.matches}}</td> 

      <!-- BEGIN QUESTION --> 
      <!-- IF {{GreaterWins()}} make it green --> 
      <!-- ELSE     make it red --> 
      <script type="text/javascript"> 
      function() { 
       if(controller.GreaterWins()) 
       { 
        <th class="green">{{ps.wins}}</th> 
       } else { 
        <th class="red">{{ps.wins}}</th> 
       } 
      } 
      </script> 
      <!-- END IF --> 
      <td>{{ps.losses}}</td> 
     </tr> 
    <table> 
    </div> 
    <!-- END PLAYER STATS TABLE --> 

Answer 1

你可以用ng-class來做到這一點。像下面這樣：

<tr ng-repeat="ps in PlayerStats" class = "playerStatTable"> 
     <td>{{ps.name}}</td> 
     <td>{{ps.matches}}</td> 
     <td ng-class="{'green': GreaterWins(),'red': !GreaterWins() }">{{ps.wins}}</td>     
     <td>{{ps.losses}}</td> 
</tr>