我正在尝试使用angularjs，并且给出了我正在尝试做的JSFiddle
。<div id="page-main-body">
<div id="container" ng-repeat="hero in heroModel">
<div id="page-header" ng-if="heroCounter === 1">
I am header
</div>
<div id="page-body">
<p>Name: {{ hero.Name }}</p>
<p>Super hero identity: {{ hero.SuperHeroName }}</p>
</div>
<div id="page-footer" ng-if="heroCounter === 2">
I am footer
</div>
{{ incrementHeroCounter() }} {{ resetHeroCounter() }}
</div>
</div>
我的问题是，如果我的模型包含 4 个元素，它可以正常工作，但是如果我从模型中删除一个元素，我看不到页脚div，并且在控制台中收到一条错误消息，上面写着
达到 10 次 $digest() 迭代。中止！观察者在过去 5 次迭代中触发：
所以我认为这是因为我正在更新$scope变量，并根据变量值绘制页眉和页脚。
如果我的数据模型包含 4 或 6 个元素，一切正常，但如果我将元素计数从偶数 (2,4) 更改为奇数 (1,3)，我会收到$digest错误
我也阅读了此错误的角度文档，但似乎我的模型也保持不变，没有任何变化，只有更改的变量是这里的计数器$scope变量，我知道这可能会导致摘要周期发生变化，但是我如何缓存它或使用不同的技术来实现我在这里尝试做的事情
我尝试了以前的几个堆栈链接，但无法从中获得良好的方向，我不确定对于像这样的简单事情，我是否应该使用service或$rootScope也许有更好的方法做到这一点。
下面给出了我的代码的样子，你也可以看看小提琴，让我知道我在这里做错了什么
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.heroCounter = 1;
$scope.incrementHeroCounter = function() {
$scope.heroCounter++;
};
$scope.resetHeroCounter = function() {
if ($scope.heroCounter === 3) {
$scope.heroCounter = 1;
}
};
$scope.heroModel = [
{
SuperHeroName: "Superman",
Name: "Clark kent"
},
{
SuperHeroName: "Batman",
Name: "Bruce Wyane"
},
{
SuperHeroName: "Iron man",
Name: "Tony Stark"
},
{
SuperHeroName: "Shazam",
Name: "Billy Batson"
}
];
});
我想打印页眉，然后打印带有数据的 2 个div 元素，然后打印页脚，第三和第四个项目应该用自己的页眉和页脚打印。
使用$index特殊属性：
<div id="page-main-body">
<div id="container" ng-repeat="hero in heroModel">
<div id="page-header" ng-hide="$index === 1">
I am header
</div>
<div id="page-body">
<p>Name: {{ hero.Name }}</p>
<p>Super hero identity: {{ hero.SuperHeroName }}</p>
</div>
<div id="page-footer" ng-hide="$index === 0">
I am footer
</div>
̶{̶{̶ ̶i̶n̶c̶r̶e̶m̶e̶n̶t̶H̶e̶r̶o̶C̶o̶u̶n̶t̶e̶r̶(̶)̶ ̶}̶}̶ ̶{̶{̶ ̶r̶e̶s̶e̶t̶H̶e̶r̶o̶C̶o̶u̶n̶t̶e̶r̶(̶)̶ ̶}̶}̶
</div>
</div>
$index特殊属性在每个ng-repeat模板实例的本地范围内公开。它是重复元素(0..length-1)的数字迭代器偏移量。
有关详细信息，请参阅
- AngularJS ng-repeat 指令 API 参考 - 概述
可以使用$index属性而不是自己的计数器。此特殊属性在每个 ng-repeat 模板实例的本地范围内公开。它是针对重复元素的数字迭代器偏移量。