infdig無限$ digest表中的循環

Question

我正在執行一個表格，其中每行都改變了CSS，但是一個表格td表格包含另一個表格。我已經實現了它這樣的：

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

我搜索了這個錯誤，並嘗試了一些代碼更改，但無法解決它。請注意，這不僅僅是檢查偶數或奇數行。有一些排序。請幫助。

Answer 1

我會改用ng-class-even/ng-class-oddhttps://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}