Javascript Ionic ng类函数触发所有ng点击应用程序如何解决此问题

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

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>

代码正常工作，类沿着列表填充，但控制台给出以下错误：

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中重复出现

看来你把这件事复杂化了。不需要跳那么多圈就可以得到正确的类来获得正确的索引。请尝试以下代码：

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

---

Angular公开了一个特殊的

$index

变量，该变量包含ng repeat指令每个元素的数组索引。

错误得到解决，但我想在ng repeat的索引较大时重复数组类列表中的类，例如，如果索引为10或20

<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];
    };
})