How to ng-repeat element's attribute?

Question

I'm using an external script to rotate thumbnails (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 is array of thumb urls like entry.thumbs[0].src, entry.thumbs[15].src, etc.

The script requires to place the thumbs urls in data-images attribute

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

How can I do it with ng-repeat so it will output correct data-images attribute? Should I use a custom directive for this? Thanks.

Answer 1

You create such a structure in your controller and use it:

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

and use this imageData in the html

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

Update 1 - updating according to OP's comment/updated question

$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>

Or if your entries is an array of array and you need normalized list of src then please find the snippet below:

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