Angulaire - La valeur d'incrémentation produit une erreur de résumé

Question

Je connais le problème que j'ai, mais je n'arrive pas à le contourner. Peu importe ce que je fais, je reçois une erreur de digestion. Le problème, je crois, appelle la méthode "getPlayerIcon" dans le ng-repeat.

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

"Player" contient un champ 'position' qui peut être un défenseur ou Attacker. La méthode 'getPlayerIcon' prend la position en tant que paramètre, puis crée une variable de portée avec ce nom de position, soit avec la valeur 1 si c'est la première fois qu'elle rencontre cette position, ou l'incrémente si c'est une occurrence de cette position.

Le problème que je vais avoir est que l'appel d'une méthode sur ng-src modifie la valeur à chaque fois qu'il est appelé dans le ng-répétition, qui se traduit par l'Indig infâme erreur digérer:

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

Comment puis-je répare ça? Je dois incrémenter parce que, par exemple, s'il y a 4 défenseurs et 4 attaquants dans le team.players, je veux pouvoir charger des images avec Defender/1, Defender/2, Defender/3, Defender/4, Attacker/1, attaquant/2, attaquant/3, attaquant/4. Fondamentalement, j'en ai besoin pour identifier la position, et avoir un compte de cette position pour sortir l'image correcte.

Aide!

Merci, FYP

Answer 1

Il suffit d'utiliser le $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> 

Cela vous donnera l'indice de l'itération courante dans la boucle et il n'y aura pas besoin de faire des incréments dans votre méthode (vous pouvez passer la valeur de l'indice de $ au lieu et ajouter un à elle).