Error: Duplicates in a repeater are not allowed. Added track by $index but data not showing

0
votes

my webservice returns this string : 

[{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"}
]

and i tried added track by $index in the html code to fix the error:

<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>

the error is gone, but the data and images still doesnt show. what could be the problem?

1
javascripthtmlangularjsionic-framework

1 Answers

0
votes

The code actually works fine, Check your css , try to remove the br tags which i dont think necessary,

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>