錯誤：不允許在中繼器中複製。新增的曲目由$指數卻沒有顯示

Question

我的web服務數據返回這個字符串：

[{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代碼中添加跟蹤修正錯誤：

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

錯誤已經消失了，但數據和圖像仍然沒有顯示。可能是什麼問題呢？

Answer 1

代碼實際工作正常，檢查你的CSS，嘗試刪除我不認爲有必要的BR標籤，

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>