Wie man das Attribut des Elements wiederholt?

Question

Ich verwende ein externes Skript, um Thumbnails zu drehen (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 ist Array Faust URLs wie entry.thumbs [0] .src, entry.thumbs [15] .src usw.

das Skript den Daumen URLs in data-images Attribut zu platzieren erfordert

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

Wie kann ich es mit ng-repeat tun, damit es richtige Daten-Bilder-Attribut ausgeben? Soll ich dafür eine benutzerdefinierte Anweisung verwenden? Vielen Dank.

Answer 1

Sie erstellen eine solche Struktur in Ihrem Controller und verwenden es:

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

und verwenden diese imageData im html

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

Update 1 - Aktualisierung nach OP Kommentar/Frage aktualisiert

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

Oder wenn entries Sie ist ein Array von Array und Sie müssen normalisierte Liste der src dann bitte das folgende Snippet finden:

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