Erreur: Les doublons d'un répéteur ne sont pas autorisés. piste Ajouté par indice de $, mais les données ne montrant

Question

mon webservice retourne cette chaîne:

[{CardNumber:"1234567",CardType:"OPI",CardBalance:"100", 
    CardImage:"img/omnipay_card.png"}, 
{CardNumber:"5678967",CardType:"MMTC",CardBalance:"200", 
    CardImage:"img/mmtc_card.png"}, 
{CardNumber:"1011167",CardType:"SEAFR",CardBalance:"300", 
    CardImage:"img/seafarers_card.png"} 
] 

et moi avons essayé ajouté piste par l'indice de $ dans le code html pour corriger l'erreur:

<ion-slide-page ng-repeat="card in cardNumbers track by $index" 
     id="mainMenu-slide24" 
     style="background:url(&quot;{{card.CardImage}}&quot;) no-repeat center;background-size:cover;"> 
<br><br><br><br><br><br><br><br><br><br> 
<h5>Card Number:{{card.CardNumber}}</h5> 
<p><h5>Balance:{{card.CardBalance}}</h5> 
</ion-slide-page> 

l'erreur est parti, mais les données et les images ne montre toujours pas. quel pourrait être le problème?

Answer 1

Le code fonctionne réellement bien, vérifiez votre css, essayez de supprimer les balises br que je ne pense pas nécessaire,

var myApp=angular.module('myApp',[]) 
 
myApp.controller('myController',function($scope){ 
 
    
 
    $scope.cardNumbers = [{CardNumber:"1234567",CardType:"OPI",CardBalance:"100",CardImage:"img/omnipay_card.png"},{CardNumber:"5678967",CardType:"MMTC",CardBalance:"200",CardImage:"img/mmtc_card.png"},{CardNumber:"1011167",CardType:"SEAFR",CardBalance:"300",CardImage:"img/seafarers_card.png"}]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='myController as vm'> 
 
<div ng-repeat="card in cardNumbers track by $index" > 
 
<h5>Card Number:{{card.CardNumber}}</h5><p><h5>Balance:{{card.CardBalance}}</h5></div> 
 
</div>