如何ng-repeat元素的屬性？

Question

我使用外部腳本旋轉縮略圖（http://sladex.org/images-rotation/）。

<div ng-repeat="entry in entries"> 
    <div class="thumbs rotation" 
     data-images="['{{entry.thumbs[0].src}}','{{entry.thumbs[1].src}}']"> 
     <a href="#"> 
     <img ng-src="{{entry.thumbs[0].src}}" class="img-fluid"> 
     </a> 
    </div> 
    <p>{{entry.title}}</p> 
</div> 

entry.thumbs是拇指網址的陣列等entry.thumbs [0]的.src，entry.thumbs [15]的.src等

腳本要求放置大拇指網址data-images屬性

data-images="['1.jpg','2.jpg']" 

我如何使用ng-repeat來做到這一點，因此它會輸出正確的數據圖像屬性？我應該使用自定義指令嗎？謝謝。

Answer 1

你在你的控制器創建這樣一個結構，並使用它：

$scope.imageData = entry.thumbs.map(function(img){ return img.src; }); 

，並在HTML

<div class="thumbs rotation" data-images="imageData"> 
.... 
</div> 

更新1使用imageData - 更新根據OP的評論/更新問題

$scope.getImageArray = function(images){ 
    return images.thumbs.map(function(img){ return img.src; }); 
}; 

<div ng-repeat="entry in entries"> 
    <div class="thumbs rotation" data-images="{{getImageArray(entry)}}"> 
    .... 
    </div> 
</div> 

或if您entries是數組的數組，你需要的src標準化名單，然後請找下面的代碼片段：

var entries = [ 
 

 
    [{ 
 
    name: 1, 
 
    src: 'img1.png' 
 
    }, { 
 
    name: 2, 
 
    src: 'img2.png' 
 
    }, { 
 
    name: 3, 
 
    src: 'img3.png' 
 
    }], 
 
    
 
    [{ 
 
    name: 4, 
 
    src: 'img4.png' 
 
    }, { 
 
    name: 5, 
 
    src: 'img5.png' 
 
    }, { 
 
    name: 6, 
 
    src: 'img6.png' 
 
    }] 
 

 
]; 
 

 
var images = entries.map(function(data) { 
 
    return data.map(function(image) { return image.src; }); 
 
}); 
 

 
images = images.reduce(function(a, b){ 
 
    return a.concat(b); 
 
}); 
 

 
console.log(images);