83

この質問は、ここで部分的に対処されています: Angular.js ng-repeat across multiple tr's

ただし、これは単なる回避策であり、実際にはコアの問題に対処していません。つまり、ラッパーなしで複数の要素で ng-repeat を使用するにはどうすればよいですか?

たとえば、jquery.accordion では h3 要素と div 要素を繰り返す必要がありますが、ng-repeat でこれを行うにはどうすればよいでしょうか?

4

3 に答える 3

159

現在、これに対する適切なサポートがあります。以下を参照してください。

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>
于 2013-06-04T22:49:30.680 に答える
22

テーブル内の 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>

これはプランカーの例です

于 2014-05-16T15:28:55.623 に答える
3

更新:この回答は古くなっています。@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>

于 2013-06-03T15:22:04.650 に答える