요소의 속성을 어떻게 반복할까요?

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 같은 손가락의 URL 어레이 [0]가 .src, entry.thumbs [15]가 .src이다

스크립트는 data-images

특성을 손가락으로 URL을 배치 할 필요

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

올바른 데이터 이미지 특성을 출력하도록 ng-repeat로 어떻게 할 수 있습니까? 이를 위해 사용자 지정 지시문을 사용해야합니까? 감사.

Answer 1

당신은 컨트롤러에서 이러한 구조를 만들고 그것을 사용 :

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

을하고 HTML

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

업데이트 1이 imageData을 사용 - 업데이트 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의 정규화 된 목록이 필요합니다 :

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