Question

我有一个离子列表，它使用函数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('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指令的每个元素的数组索引。

离子ng-class函数触发app中的所有ng-click如何解决这个问题

1 个答案: