반응형
Angular.js ng-복수의 요소에 걸쳐 반복
이 질문은 여기서 부분적으로 다루어졌다: Angular.js ng-repeat 여러 tr에 걸쳐
그러나 이는 회피책일 뿐 실제로는 핵심 문제, 즉 래퍼 없이 여러 요소에 걸쳐 ng-repeat을 사용할 수 있는 방법은 없습니다.
예를 들어 jquery.accordion에서는 h3와 div 요소를 반복해야 하는데 어떻게 ng-repeat을 사용하여 이 작업을 수행할 수 있습니까?
이것으로, 적절한 서포트를 얻을 수 있게 되었습니다.다음 항목을 참조해 주십시오.
AngularJs Commit(각도JS 통신)
이 변경을 통해 다음 작업을 수행할 수 있습니다.
<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>
테이블 내의 ng-repeat-start에 대한 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>
다음은 plunker 예시입니다.
업데이트: 이 답변은 오래되었습니다.@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);
}
})
두 번째 옵션은 comment style 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
반응형
'programing' 카테고리의 다른 글
| PLS-00428: 이 SELECT 문에 INTO 절이 필요합니다. (0) | 2023.03.18 |
|---|---|
| ASP를 실행합니다.NET의 Blog Engine.Net Stack Up Wordpress? (0) | 2023.03.18 |
| 치명적인 오류 해결 방법: 아바다 테마에서 활성 클래스 범위가 없을 때 "self"를 사용할 수 없습니다. (0) | 2023.03.18 |
| 웹 팩 - 오류: 로더 목록에 '쿼리' 및 여러 로더를 정의할 수 없습니다. (0) | 2023.03.18 |
| IE10/11 Ajax XHR 오류 - SCRIPT7002: XMLHttpRequest:네트워크 오류 0x2ef3 (0) | 2023.03.18 |