在 ng-repeat 中有条件地格式化/样式

Question

我试图想出一种方法来有条件地格式化 html 表格（简单的背景颜色），结果来自 AngularJS 控制器。这有望在 ng-repeat 迭代期间发生，因为它通过数组中的元素工作。

我想要完成的是：每当控制器内的函数返回true时，背景或样式为绿色，否则为红色。

在插入点的评论中查找“BEGIN QUESTION”。

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