91

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

<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を実行する方法、または同じ効果を達成するための代替方法があるかどうかを知りたいです。

4

7 に答える 7

104

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

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

John Lindquistは、彼の優れたegghead.ioページにこれに関するビデオチュートリアルもあります。

于 2013-09-16T09:08:00.897 に答える
30

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

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

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

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

AngularJSがこのタイプの構文を提供していないのはかなり残念だと思います。

Angularng-repeat-startとng-repeat-end

問題を解決するAngularJSの方法ng-repeatで、私が遭遇したサンプルは、彼の（役立つ）回答に投稿されたタイプ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したところ、別のタグに追加することは、ほとんどの場合、まったく役に立たない要素（この場合は何も含まれていないアイテム）を生成するため、私がやりたくないことです。<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のコンテナレスバインディングがこの点で提供するのと同じ利点があります。

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

Angularのこの問題に関するgithubのコメント（https://github.com/angular/angular.js/issues/1891）をさらに確認した後、同じ利点を使用して達成する
必要はありません。代わりに、jmagnussonの例をもう一度フォークすると、次のようになります。ng-repeat-startng-repeat-end

<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つの親要素だけでなく、一連の要素を繰り返します...

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

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

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

于 2014-01-30T01:16:50.433 に答える
6

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

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

このような単純なディレクティブは実際には属性値を必要としませんが、インデックスや長さなどに応じて条件付きで除算器を追加したり、まったく異なるものを追加したりするなど、多くの可能性を提供する可能性があります。

于 2012-10-12T20:58:46.723 に答える
3

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

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

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

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

これにより、周囲にコンテナがない状態で、さまざまなテンプレートがいくつでも繰り返されます。

注：うーん、これでレンダリング時にdi-null要素が削除されることを誓うことができましたが、もう一度確認しても、レイアウトの問題は解決されませんでした...curioserとcurioser...

于 2013-09-17T11:54:23.227 に答える
2

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

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>

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

于 2019-07-20T22:40:21.697 に答える
1

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

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

于 2012-10-12T12:04:00.873 に答える
1

Bootstrapを使用している場合は、これを行うためのAngularの魔法の方法はありません。この場合、有効な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>
于 2015-05-13T11:49:18.243 に答える