背景

最近在用ionic+angularjs做一款應用，期間使用ionic的slidebox時用ng-repeat指定輪播的圖片

<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler">
    <ion-slide ng-repeat="slideImg in slideImages">
        <div class="box">
            <img src="{{slideImg}}" style="width: 100%;">
        </div>
    </ion-slide>
</ion-slide-box>

測試的時候為了方便直接復制的相同的地址：

$scope.slideImages = [
        'images/banner1.jpg',
        'images/banner1.jpg',
        'images/banner1.jpg',
        'images/banner1.jpg'
    ];

結果控制臺報錯：
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.3/ngRepeat/dupes?

解決方案

原因是ngRepeat不允許存在兩個相同ID的對象，所以要加上track by表達式，這里為了方便直接使用索引變量$index

<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler">
    <ion-slide ng-repeat="slideImg in slideImages track by $index">
        <div class="box">
            <img src="{{slideImg}}" style="width: 100%;">
        </div>
    </ion-slide>
</ion-slide-box>