Javascript 错误：中继器中不允许重复。按$index添加了曲目，但未显示数据

my webservice返回以下字符串：

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

我尝试在html代码中添加track by$index来修复错误：

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

卡号：{{Card.CardNumber}
余额：{{card.CardBalance}

---

错误消失了，但数据和图像仍然无法显示。有什么问题吗

代码实际上运行良好，检查css，尝试删除我认为不必要的br标记

var myApp=angular.module（'myApp'，[]）
myApp.controller（'myController'，函数（$scope）{
$scope.CardNumber=[{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:“Seaver”，CardBalance:“300”，CardImage:“img/Seathers_card.png”}；
});

卡号：{{Card.CardNumber}余额：{{Card.CardBalance}