javascript - Ionic ng-class 函数在应用程序中的所有 ng-click 上触发如何解决此问题

Question

我有一个 ionic 列表，它使用函数 getClass() 来获取每次迭代的类名。 这个“getClass()”函数将在列表填充时被触发，但似乎该函数在应用程序中的每次 ng-click 中都会被触发。例如，当我单击上面的“新闻”按钮时会触发该功能。

Html 文件中的代码是:

<ion-view view-title="News App"  >
  <ion-content>
 <div class="ionic">
        <div class="button-bar bar-energized">
        <a class="button button-raised ink-dark" ng-click="">
        News
        </a>
         <a class="button button-raised ink-dark">
        Features
        </a>           
        </div>
        <div class="content " ng-controller="NewsCtrl">
            <div class="list ">

            <div   ng-repeat="news in newslists" ng-class="getClass()" ng-click="" >

                        <p>{{news.title}}</p>

                </div>
            </div>
        </div>
    </div>
  </ion-content>
</ion-view>

Controllers.js 中的代码:

    .controller('NewsCtrl', function($scope) {
      var classlist =["class1","class2","class3","class4","class5"]; 
      var classIndex =0;
      var temClass='';
      $scope.newslists = [{....},{...},{...} ]; // array of arrays  with news details
      $scope.getClass =function(){
       temClass = classlist[classIndex];
      classIndex++;
      if(classIndex==5)
      {
      // need to repeat the array if index of ng-repeat is more than 5
      classIndex=0;
      }
      return temClass;
      };
    })

代码有效并且类沿着列表填充，但控制台给出以下错误:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"}],[{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"}],[{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"}],[{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"}],[{"msg":"getClass()","newVal":"class1","oldVal":"class5"},{"msg":"getClass()","newVal":"class2","oldVal":"class1"},{"msg":"getClass()","newVal":"class3","oldVal":"class2"},{"msg":"getClass()","newVal":"class4","oldVal":"class3"},{"msg":"getClass()","newVal":"class5","oldVal":"class4"},{"msg":"getClass()","newVal":"class1","oldVal":"class5"}]]
http://errors.angularjs.org/1.3.13/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22m…3A%22card%20dark-bg%20in%22%2C%22oldVal%22%3A%22ard%20royal-bg%22%7D%5D%5D
    at REGEX_STRING_REGEXP (ionic.bundle.js:8762)
    at Scope.$get.Scope.$digest (ionic.bundle.js:22980)
    at Scope.$get.Scope.$apply (ionic.bundle.js:23205)
    at done (ionic.bundle.js:18358)
    at completeRequest (ionic.bundle.js:18548)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:18489)

每次 ng-click 也会重复上述错误。

Answer 1

看来你把这个问题搞得太复杂了。无需跳那么多圈子即可获得正确索引的正确类。试试这个代码:

<div ng-repeat="news in newslists" ng-class="getClass($index)" ng-click="" >
    <p>{{news.title}}</p>
</div>

并将您的 Controller 修改为:

.controller('NewsCtrl', function($scope) {
    var classlist =["class1","class2","class3","class4","class5"];
    var classLength = classlist.length;
    $scope.newslists = [{....},{...},{...} ]; // array of arrays  with news details
    $scope.getClass =function(index) {
        return classlist[index % classLength];
    };
})

Angular 公开了一个特殊的 $index 变量，其中包含 ng-repeat 指令的每个元素的数组索引。