如何 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 是拇指 URL 数组，例如 entry.thumbs[0].src、entry.thumbs[15].src 等。

脚本需要将拇指网址放在data-images 属性中

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

如何使用 ng-repeat 来输出正确的 data-images 属性？我应该为此使用自定义指令吗？谢谢。

Answer 1

您在控制器中创建这样一个结构并使用它：

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

并在 html 中使用 imageData

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

更新 1 - 根据 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>

或者如果您的entries 是一个数组数组，并且您需要标准化的src 列表，那么请在下面找到sn-p：

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