Question

我知道我遇到的问题，但我无法找到解决方法。无论我做什么，我都会得到一个摘要错误。 我认为问题是在ng-repeat中调用“getPlayerIcon”方法。

HTML：

 <div class="col-md-2" ng-repeat="player in team.players">
   <img class="card-img-player" ng-src="/{{player.position}}/{{getPlayerIcon(player.position)}}" data-holder-rendered="true" style="height: 270px; width: 100%; display: block;">
 </div>

AngularJS：

$scope.getPlayerIcon = function(position) {
 if ($scope[position] === undefined)
   $parse(position).assign($scope, 1);

$scope[position]++;
return $scope[position];
}

“玩家”包含一个“位置”字段，可以是后卫或攻击者。 'getPlayerIcon'方法将位置作为参数，然后创建一个具有该位置名称的范围变量，如果它是第一个位于该位置的值，则值为1;如果是该位置，则递增它那个位置。

我遇到的问题是，在ng-src中调用一个方法会在每次在ng-repeat中调用时更改值，这会导致臭名昭着的indig摘要错误：

angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest - `iterations reached. Aborting!`

我该如何解决这个问题？我必须增加，因为，例如，如果team.players中有4名防守者和4名攻击者，我希望能够使用Defender / 1，Defender / 2，Defender / 3，Defender / 4，Attacker /加载图像1，攻击者/ 2，攻击者/ 3，攻击者/ 4。基本上我需要它来识别位置，并计算该位置以获得正确的图像。

帮助！

谢谢， FYP

Answer 1

只需使用$index。

 <div class="col-md-2" ng-repeat="player in team.players track by $index">
   <img class="card-img-player" ng-src="/{{player.position}}/{{getPlayerIcon(player.position, $index)}}" data-holder-rendered="true" style="height: 270px; width: 100%; display: block;">
 </div>

这将为您提供循环中当前迭代的索引，然后不需要在您的方法中进行增量（您可以传入$ index值并向其中添加一个）。

Angular - 递增值会产生摘要错误

1 个答案: