表中的 infdig 无限 $digest 循环答案

【问题标题】：infdig Infinite $digest Loop in table表中的 infdig 无限 $digest 循环
【发布时间】：2017-06-20 00:30:48
【问题描述】：

我正在使用 CSS 实现一个表格，该表格在每一行中都发生了变化，但一个 td 表格包含另一个 table。我已经这样实现了：

HTML 代码：

 <table width="100%" class="table">

        <thead>
            <tr>
                <th style="width: 11%">Location</th>

                <th><div>                   
                <table class="table" style="table-layout: fixed;width: 100%; margin-bottom: 0px;">
                <tr>

                <th style="width: 12%">Col1</th>
                <th style="width: 12%">Col2</th>
                <th style="width: 12%">Col3</th>
                <th style="width: 11%">Col4</th>
            </tr>
            </table>
            </div>
            </th>
            </tr>
        </thead>

        <tbody style="overflow-y: auto; max-height: 200px;">

        <tr data-ng-repeat="Loc in LocationList">

                <td style="width: 11%;">{{Loc.locationName}}</td>

                <td><div>
                <table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
                <tr data-ng-repeat="a in Loc.locations">

                <td data-ng-class="(checkEvenOrOdd()) ? 'odd' : 'even'" style="width: 12%;">{{a.subLocName}}</td>

                <td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">{{a.typeName}}</td>

                <td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">                          
                        <span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
                        <span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
                </td>
      </tr>
                </table>
                </div>
                </td>
            </tr>

            </tbody>

JS代码：

$scope.evenOrOdd = true;

        $scope.checkEvenOrOdd = function()
        {
           if($scope.evenOrOdd==true)
         {
            $scope.evenOrOdd=false;
            return !$scope.evenOrOdd;
         }
          else
         {
           $scope.evenOrOdd=true;
           return !$scope.evenOrOdd;
         }

        };

这段代码给了我正确的输出，但是在点击页面上的任何链接后它给了我这个错误

Watchers fired in the last 5 iterations: [["(checkEvenOrOdd()) ? 'odd' : 'even';

我搜索了这个错误并尝试了一些代码更改但无法解决它。请注意，这不仅仅是检查偶数行或奇数行。行中有一些排序。请帮忙。

【问题讨论】：

标签： javascript angularjs html-table angularjs-ng-repeat

【解决方案1】：

我会改用ng-class-even/ng-class-odd https://docs.angularjs.org/api/ng/directive/ngClassEven：

<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
                <tr data-ng-repeat="a in Loc.locations">

                <td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.subLocName}}</td>

                <td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.typeName}}</td>

                <td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">                          
                        <span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
                        <span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
                </td>
      </tr>
                </table>

或者也可以使用 css 来完成，但这在 IE8 中不起作用：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

【讨论】：