Question

我正在使用CSS实现一个表，每个行都会更改，但表的一个 td 包含另一个表。我已经像这样实现了它：

HTML code：

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

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

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

infdig Infinite $ digest循环表

1 个答案: