ng-repeat没有正确地着色元素?

时间:2016-04-01 23:42:36

标签: angularjs background-color ng-class

我很难理解为什么数据中的字段没有正确着色。我使用一个简单的大于逻辑来分配绿色或红色的ng类。我添加了调试行来检查函数内部的值是否正确,并且bool是正确的,但是在主页上的项目是随机的'颜色不正确。帮助

我在值上尝试了几个不同的东西,比如parseInt()等,结果相同。同样,无论我在功能中放置什么,它都会显示与预期不同的颜色

            <table>
                <th><input class="search" type="text" ng-model="searchKey" placeholder="Character" ng-change="setClickedRow(-1)"></th>
                <th ng-click="setSort('pval1')">
                    <div ng-app="KIdash" ng-controller="controller">
                    Total Matches: {{TotalMatchesFunc()}}
                    </div>
                </th>
                <th ng-click="setSort('pval2')">Wins</th>
                <th ng-click="setSort('pval3')">Losses</th>
                <tbody ng-repeat="ps in PlayerStats | orderBy: sortKey | filter:searchKey">
                    <tr ng-class="{'main-row-selected': $index == selectedRow,'main-row': $index != selectedRow}" ng-click="setClickedRow($index)">
                        <td>{{ps.name}}</td>
                        <td>{{ps.pval1}}</td>

                        <!-- *** THIS IS THE PART THAT ISNT WORKING CORRECTLY *** -->
                        <td ng-class="{'green': GreaterWins({{$index}}),'red': !GreaterWins({{$index}})}">{{ps.pval2}}</td>

                        <td>{{ps.pval3}}</td>
                    </tr>

                    <!-- *** COULD THIS SECOND FUNCTION CALL BE POLLUTING MY RESULTS? *** -->
                    <tr ng-class="{'extra-row-green': GreaterWins({{$index}}),'extra-row-red': !GreaterWins({{$index}})}" ng-show="selectedRow == $index">
                        <td>Detail: {{ps.detail_p1}}</td>
                        <td>Detail: {{ps.detail_p2}}</td>
                        <td>Detail: {{ps.detail_p3}}</td>
                        <td>Detail: {{ps.detail_p4}}</td>
                    </tr>
                </tbody>
            </table>


$scope.GreaterWins = function(z) {
    console.log( "bool " 
        + Boolean($scope.PlayerStats[z].pval2 > $scope.PlayerStats[z].pval3)
        + "   "
        + $scope.PlayerStats[z].pval2 + "vs" + $scope.PlayerStats[z].pval3);

    return Boolean($scope.PlayerStats[z].pval2 > $scope.PlayerStats[z].pval3));
};

2 个答案:

答案 0 :(得分:1)

我认为有两件事情会产生问题。

  1. 不应在函数中传递索引,而应将变量 ps 作为ngRepeat创建隔离范围。所以有一段时间有问题。
  2. 变量 selectedRow 应该是对象,因为原始变量在继承和两个数据绑定方面存在问题。
  3. 尝试你的代码应该工作的两件事。

答案 1 :(得分:1)

我不能用JSbin重复这个问题,这是我在JSbin中做的例子。

https://jsbin.com/jadiputoha/edit?html,js,console,output