要素の属性を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スクリプトはdata-images属性に親指のURLを配置するために必要などのようなentry.thumbs親指URLの配列[0] .SRC、entry.thumbs [15] .SRC、

ある

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

ng-repeatを使って正しいデータイメージ属性を出力するにはどうすればよいですか？私はこのためにカスタムディレクティブを使うべきですか？ありがとう。

Answer 1

あなたのコントローラ内でこのような構造を作成し、それを使用します。

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

と

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

HTMLではこのimageDataを使用するUpdate 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> 

またはif entry.thumbs構造を説明

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