この質問はここで部分的に対処されています:Angular.jsng-複数のtrにまたがる繰り返し
ただし、これは実際には単なる回避策であり、実際にはコアの問題に対処していません。つまり、ラッパーなしで複数の要素にわたってng-repeatを使用するにはどうすればよいでしょうか。
たとえば、jquery.accordionではh3要素とdiv要素を繰り返す必要がありますが、ng-repeatを使用してこれを行うにはどうすればよいでしょうか。
この質問はここで部分的に対処されています:Angular.jsng-複数のtrにまたがる繰り返し
ただし、これは実際には単なる回避策であり、実際にはコアの問題に対処していません。つまり、ラッパーなしで複数の要素にわたってng-repeatを使用するにはどうすればよいでしょうか。
たとえば、jquery.accordionではh3要素とdiv要素を繰り返す必要がありますが、ng-repeatを使用してこれを行うにはどうすればよいでしょうか。
回答:
現在、これを適切にサポートしています。以下を参照してください。
この変更により、次のことができるようになります。
<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
ディレクティブを使用してください。
2つのオプションがあります。
最初のオプションは、複数のタグをレンダリングし、ソースタグを置き換えるディレクティブを作成することです(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);
}
})
2番目のオプションは、コメントスタイルの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>
element.replaceWith(newElement);
ラッパータグを必要なものに置き換えます。また、ディレクティブにループを設定して、必要な数のタグをtmplに追加することもできます。