AngularJS中ng-repeat遍历对象数组陷入无限循环的解决方法

错误原因 #

AngularJS的脏检查机制会多次执行视图中绑定的表达式（比如ng-if里的$ctrl.isHighlighted()），直到模型状态稳定。你的isHighlighted()方法每次调用都会填充或修改items数组，这会导致数组的引用或内容发生变化，触发新一轮脏检查循环。当循环次数超过10次时，就会抛出[$rootScope:infdig]错误。

解决方案 #

1. 分离模型修改与状态判断逻辑 #

把填充items数组的代码从isHighlighted()中抽离，放到组件初始化钩子（如$onInit()）或按需触发的方法中，让isHighlighted()只负责返回判断结果，不修改任何模型数据。

组件代码示例：

// 初始化时填充数组，或在需要更新时调用
this.$onInit = function() {
  this.loadItems();
};

// 仅返回高亮状态判断结果
this.isHighlighted = function() {
  return this.items && this.items.length > 0;
};

// 专门负责填充items数组的方法
this.loadItems = function() {
  // 这里写原来isHighlighted中填充数组的逻辑
  this.items = [
    { method: 0, text: 'text1' },
    { method: 1, text: 'text2' },
    { method: 3, text: 'text3' }
  ];
};

2. 避免在绑定表达式中生成新数组 #

如果你的填充逻辑每次都会创建新数组（比如this.items = [...newData]），即使内容相同，数组引用的变化也会触发脏检查。确保只在数据真正需要更新时才修改数组，而非每次判断状态都重新生成。

3. 用属性绑定替代方法调用 #

在组件中维护一个布尔属性isHighlighted，当items数组变化时更新该属性，视图直接绑定这个属性，避免每次脏检查都执行方法。

组件代码示例：

this.isHighlighted = false;
this.items = [];

this.$onInit = function() {
  this.loadItems();
  this.updateHighlightStatus();
};

this.loadItems = function() {
  this.items = [
    { method: 0, text: 'text1' },
    { method: 1, text: 'text2' },
    { method: 3, text: 'text3' }
  ];
  // 数组更新后同步状态
  this.updateHighlightStatus();
};

this.updateHighlightStatus = function() {
  this.isHighlighted = this.items.length > 0;
};

视图代码修改：

<div class="item" ng-if="$ctrl.isHighlighted">
    <div class="item-label">Highlighted field</div>
    <span ng-repeat="item in $ctrl.items track by $index">
        <span>{{item.text}}</span>
    </span>
</div>

内容的提问来源于stack exchange，提问作者Varghese