Javascript ng repeat内的有条件格式/样式

我正试图找到一种方法，用AngularJS控制器的结果有条件地格式化html表（一种简单的背景色）。这有望在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 -->

字符名
总匹配项：{{TotalMatchesFunc（）}}:{{{GreaterWins（）}}
获胜
损失
{{ps.name}}
{{ps.matches}}
函数（）{
if（controller.GreaterWins（））
{
{{ps.wins}}
}否则{
{{ps.wins}}
}
}
{{ps.loss}}

您可以通过ng类完成此操作。如下所示：

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

{{ps.name}}
{{ps.matches}}
{{ps.wins}}
{{ps.loss}}

您可以通过ng类完成此操作。如下所示：

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

{{ps.name}}
{{ps.matches}}
{{ps.wins}}
{{ps.loss}}

多好的答案啊！谢谢你。我所有的结果都是红色的，我需要做些什么来保证GreaterWins（）函数被正确使用？我是否需要在此上下文中将其称为controller.GreaterWins（）？您不需要显式编写

controller.GreaterWins（）

，因为您没有将控制器用作语法。

GreaterWins（）

功能是否在

controller

范围中定义？它是否总是返回

false

？当我用T或F替换逻辑>比较时，它的行为符合预期。看来我只是没有正确地比较这些值。哦！我需要将ng repeat$index发送到GreaterWins（）函数，以便获得数组的正确索引。这在使用ng类时是可能的吗？是的，您可以执行

{{ps.wins}

或者您甚至可以直接传递实际元素，而不是像

{ps.wins}}

这样的索引，这是一个非常好的答案！谢谢你。我所有的结果都是红色的，我需要做些什么来保证GreaterWins（）函数被正确使用？我是否需要在此上下文中将其称为controller.GreaterWins（）？您不需要显式编写

controller.GreaterWins（）

，因为您没有将控制器用作语法。

GreaterWins（）

功能是否在

controller

范围中定义？它是否总是返回

false

？当我用T或F替换逻辑>比较时，它的行为符合预期。看来我只是没有正确地比较这些值。哦！我需要将ng repeat$index发送到GreaterWins（）函数，以便获得数组的正确索引。这在使用ng类时可能吗？是的，您可以执行

{{ps.wins}

，或者您甚至可以直接传递实际元素，而不是像

{ps.wins}}

这样的索引。为什么要更新原始问题？如果你愿意，我会说保持原始问题的完整性，并添加一个带有解决方案的编辑。你为什么要更新原始问题？我想说的是，保持原始问题的完整性，如果你想的话，添加一个带有解决方案的编辑。