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中使用此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的规范化列表，请找到以下代码段：

＆＃13;

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

＆＃13;

如何ng-repeat元素的属性？

1 个答案: