Angular.jsng-複数の要素にわたって繰り返します


83

この質問はここで部分的に対処されています:Angular.jsng-複数のtrにまたがる繰り返し

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

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

回答:


159

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

AngularJs Commmit

この変更により、次のことができるようになります。

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

1
他の誰かを助ける場合に備えて...これは、angularjs.orgWebサイトのAngularJsの安定したビルドでも不安定なビルドでも利用できませんでした。これを機能させるには、Angular.jsの最先端をインストールする必要がありました
ハウツー

3
@geoidesicが示唆しているように、これは1.1.5の後に着陸したので、1.1.6(またはおそらく1.2.0)でそれを監視します
Anson

1
ng-repeat-startが現在不安定なバージョン(
bresleveloper 2013

1
そして、2番目の<tr>自体が「ネストされた」繰り返しである場合はどうなりますか?例:<tr ng-repeat-start = ".."> </ tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </ tr>
アンドレ

@アンドレそうしないでください。むしろ、最初のng-repeat内に新しいディレクティブを作成します。
geoidesic 2017年

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>

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


この作業を取得しようとしていますが、取得しているのは次のとおりです。未終了の属性、「ng-repeat-start」が見つかりましたが、一致する「ng-repeat-end」が見つかりません。これはもう機能しませんか?角度1.5を使用
stibay 2016

3

更新:この回答は古くなっています。@IgorMinarの回答を参照し、標準ng-repeat-startng-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>  


いいね。でもわかりません!あなたの最初の例では、ng-repeatが表示されないので、それがどのように関連しているかわかりません(フィドルを見ましたが、非常に複雑なので、頭も尻尾も作成できません)。あなたの2番目の例は私にとってただのgobbledigookです。
geoidesic 2013年

最初の例では、2つの要素のラッパーが繰り返されるため、問題に対処していません。つまり、ng-repeatディレクティブを含む要素も繰り返されます。内部要素を繰り返したいだけです。
geoidesic 2013年

@ user2448430いいえ、違います。element.replaceWith(newElement);ラッパータグを必要なものに置き換えます。また、ディレクティブにループを設定して、必要な数のタグをtmplに追加することもできます。
vittore 2013年

同意しません。試してみると、ng-repeatディレクティブを含む要素が繰り返されます。また、2番目の例は実際には機能していません。divは繰り返されず、plnkrの例で出力されているのは配列だけです。
geoidesic 2013年

1
@JoshGoughはそうするので、これらのスパンを非表示にするルールをcssに追加することになります。
vittore 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.