HTML要素のないAngularJS ng-repeat

私は現在、このコードを使用してリストをレンダリングしています：

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

ただし、<div>一部のブラウザでは、この要素が原因で非常に小さなレンダリングの欠陥が発生しています。divコンテナーなしでng-repeatを実行する方法、または同じ効果を達成するためのいくつかの代替方法があることを知りたいです。

Andy Joslinがコメントベースのng-repeatsに取り組んでいると述べたように、どうやらブラウザの問題が多すぎたようです。幸いなことに、AngularJS 1.2では、新しいディレクティブng-repeat-startとを使用して子要素を追加せずに繰り返しをサポートする組み込みサポートが追加されていng-repeat-endます。

Bootstrapのページネーションを追加するための小さな例を次に示します。

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

完全な動作例はここにあります。

ジョンリンドキストの優れたegghead.ioページにも、このビデオチュートリアルがあります。

KnockoutJSコンテナーレスバインディング構文

しばらくお待ちください。KnockoutJSにforeachは、foreachバインディングドキュメントの注4で説明されているように、バインディングにコンテナレスバインディング構文を使用するという非常に便利なオプションが用意されています。 http://knockoutjs.com/documentation/foreach-binding.html

Knockoutドキュメントの例が示すように、次のようにKnockoutJSでバインディングを記述できます。

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

残念なことに、AngularJSはこのタイプの構文を提供していません。

Angular ng-repeat-startとng-repeat-end

ng-repeat問題を解決するAngularJSの方法で、私が遭遇するサンプルは、彼の（役立つ）回答に投稿されたjmagnussonタイプのサンプルです。

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

この構文を見たときの私の最初の考えは、次のとおりです。なぜAngularは、この余分なマークアップをすべて、私が何もしたくないものを強制しているのですが、Knockoutの方がはるかに簡単です。しかし、jmagnussonの答えにあるhitautodestructのコメントに疑問が生じ始めました。別のタグでng-repeat-startとng-repeat-endで何が生成されているのでしょうか。

よりクリーンな使用方法ng-repeat-startとng-repeat-end

hitautodestructの主張の調査の結果、追加ng-repeat-end別のタグににすると、私は考えまさにあるではない、それは全くusesless要素を生成しているため、ほとんどのケースでやりたい。この場合は、<li>その中の何ものアイテム。Bootstrap 3のページ付けされたリストはリストアイテムのスタイルを設定しているため、余分なアイテムを生成していないように見えますが、生成されたhtmlを検査すると、そこにあります。

幸いなことに、よりクリーンなソリューションとより短い量のhtmlを作成するために多くのことを行う必要はありません。宣言をと同じhtmlタグに置くだけng-repeat-endng-repeat-startです。

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

これには3つの利点があります。

1. 書くhtmlタグを減らす
2. 役に立たない、空のタグはAngularによって生成されません
3. 繰り返す配列が空の場合、タグng-repeatが生成されないため、Knockoutのコンテナーレスバインディングと同じ利点が得られます。

しかし、まだよりクリーンな方法があります

角度のために、この問題にgithubののコメントを検討し、さらに後、https://github.com/angular/angular.js/issues/1891、
あなたが使用する必要はありませんng-repeat-startし、ng-repeat-end同じ利点を達成します。代わりに、jmagnussonの例を再度フォークして、次のように実行できます。

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

だから、ときに使用するng-repeat-startとng-repeat-end？あたりとして、角度のドキュメントへ

...親要素を1つだけではなく、一連の要素を繰り返す...

十分な話、いくつかの例を示してください！

けっこうだ; このjsbinはng-repeat-end、同じタグで使用した場合と使用しない場合の結果の5つの例を示します。

http://jsbin.com/eXaPibI/1/

ngRepeatでは不十分な場合がありますが、カスタムディレクティブと組み合わせることができます。jQueryを少しでも気にしなければ、コードにディバイダーアイテムを追加するタスクを委任できます。

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

このような単純なディレクティブは実際には属性値を必要としませんが、条件に応じてインデックス、長さなどのディバイダーを追加するなど、多くの可能性を提供する可能性があります。

私は最近、スパンとイメージの任意のコレクションを繰り返さなければならないという同じ問題を抱えていました-それらの周りに要素があることはオプションではありませんでした-簡単な解決策がありますが、「null」ディレクティブを作成します：

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

その後、そのElementで繰り返しを使用できます。element.urlはその要素のテンプレートを指します。

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

これは、周囲にコンテナがない、任意の数の異なるテンプレートを繰り返します。

注：うーん、私はこれをレンダリングするときにdi-null要素を削除することを宣言できたかもしれませんが、もう一度それをチェックすると...それでも私のレイアウトの問題は解決しました... curioserとcurioser ...

コメントディレクティブの制限がありますが、ngRepeatはこれをサポートしていません（繰り返すには要素が必要なため）。

角張ったチームがコメントng-repeatsに取り組むと言っているのを見たと思いますが、私にはわかりません。リポジトリで問題を開く必要があります。 http://github.com/angular/angular.js

これを行うためのAngularの魔法の方法はありません。あなたのケースでは、Bootstrapを使用している場合、有効なHTMLを取得するためにこれを行うことができます。その後、li.dividerを追加するのと同じ効果が得られます

クラスを作成します。

span.divider {
 display: block;
}

コードを次のように変更します。

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>

実際に機能するソリューション

html

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

angular.jsディレクティブを追加する

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

簡単な説明については、

ng-repeatはそれ自体を<remove>要素にバインドし、必要に応じてループします。また、ng-repeat-start / ng-repeat-endを使用しているため、要素だけでなくhtmlのブロックもループします。

次に、カスタム削除ディレクティブは、<remove>開始要素と終了要素を<!--removed element-->