infdig Бесконечный $ digest Loop в таблице

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}