반응형
Angular.js 여러 요소에서 ng-repeat
이 질문은 여기에서 부분적으로 해결되었습니다 : Angular.js ng-repeat across multiple tr 's
그러나 이것은 실제로 해결 방법 일 뿐이며 실제로 핵심 문제를 해결하지 않습니다. 즉, 래퍼없이 여러 요소에서 ng-repeat를 어떻게 사용할 수 있습니까?
예를 들어, jquery.accordion에서는 h3 및 div 요소를 반복해야합니다. ng-repeat로이를 어떻게 수행 할 수 있습니까?
이제 이에 대한 적절한 지원이 제공됩니다. 다음을 참조하십시오.
AngularJs 커밋
이 변경으로 이제 다음을 수행 할 수 있습니다.
<table>
<tr ng-repeat-start="item in list">
<td>I get repeated</td>
</tr>
<tr ng-repeat-end>
<td>I also get repeated</td>
</tr>
</table>
테이블에서 2 개 이상의 ng-repeat 수준에 대한 Andre의 질문에 답하려면 여러 ng-repeat-start를 사용하여이를 수행 할 수 있습니다.
<tr ng-repeat-start="items in list">
<td>{{items.title}}</td>
</tr>
<tr ng-repeat-start="item in items">
<td>{{item.subtitle}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
<td>{{value.col1}}</td>
<td>{{value.col2}}</td>
</tr>
<tr ng-repeat-end></tr>
다음은 플 런커 예입니다.
업데이트 :이 답변은 구식입니다. @IgorMinar 답변을 참조하고 표준 ng-repeat-start및 ng-repeat-end지침을 사용하십시오 .
두 가지 옵션이 있습니다.
첫 번째 옵션은 여러 태그를 렌더링하고 소스 태그 ( jsfiddle )를 대체하는 지시문을 만드는 것입니다.
<div multi ></div>
angular.module('components').directive('multi', function ($compile) {
return {
restrict: 'A',
scope : {
first : '=',
last : '=',
},
terminal:true,
link: function (scope, element, attrs) {
var tmpl = '', arr = [0,1,2,3]
// this is instead of your repeater
for (var i in arr) {
tmpl +='<div>another div</div>'
}
var newElement = angular.element(tmpl);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
})
두 번째 옵션은 주석 스타일 ngRepeat 지시문 ( plnkr ) 을 활성화하는 angular의 업데이트 된 소스 코드를 사용하는 것입니다.
<body ng-controller="MainCtrl">
<div ng-init="arr=[0,1,2]" ></div>
<!-- directive: ng-repeat i in arr -->
<div>{{i}}</div>
<div>{{ 'foo' }}</div>
<!-- /ng-repeat -->
{{ arr }}
<div ng-click="arr.push(arr.length)">add</div>
</body>
참고 URL : https://stackoverflow.com/questions/16900050/angular-js-ng-repeat-across-multiple-elements
반응형
'program tip' 카테고리의 다른 글
| jQuery로 마지막 5 개 요소 선택 (0) | 2020.09.21 |
|---|---|
| 자바에서 goto 문에 대한 대안 (0) | 2020.09.21 |
| 배열의 ObjectId에 대한 $ lookup (0) | 2020.09.21 |
| Python에서 콘솔 출력 교체 (0) | 2020.09.21 |
| SQLAlchemy-테이블 목록 가져 오기 (0) | 2020.09.21 |