如何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);