反復ng-AngularJsでX回だけ繰り返す


86

どのように私は次のようにNG・リピートを使用することができるため、JavaScriptで?

例:

<div ng-repeat="4">Text</div>

ng-repeatを4回繰り返したいのですが、どうすればよいですか?


3
両方が可能です:ディレクティブには、ngBindなどのキャメルケース名があります。このディレクティブは、キャメルケース名をこれらの特殊文字:、-、または_を使用してスネークケースに変換することで呼び出すことができます。オプションで、ディレクティブの前にx-またはdata-を付けて、HTMLバリデーターに準拠させることができます。
asgoth 2013年

2
どうしてこんなに多くの間違った答えが来るのか、ng-repeat = "item in items | limitTo:4"
Toolkit

彼が反復する配列を持っていない可能性があります。たとえば、星の評価で星を表示します。表示する必要のある星の数のフィールドがある場合がありますが、これは反復可能ではありません。
nirazul 2015年

@Toolkit ...そしてitems..とは何ですか?
TJ

回答:


342

AngularにはlimitTo:limitフィルターが付属しており、最初のx個のアイテムと最後のx個のアイテムの制限をサポートしています。

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
これは、配列内のオブジェクトの反復処理でも機能するため、答えになるはずです。さらに、そのAngular機能。
Ashley Coolman 2014年

29
これは非常に便利なコードですが、実際にはOPの質問を満たしていません。彼は単にn回繰り返す方法を探しているだけであり、反復する実際のオブジェクトがない可能性があります。
SamHuckaby 2014年

2
これが答えになるはずです。AngularJSコアが提供するツールを使用しています
Udo

10
これは実際には問題を解決しません。あなたは彼が名前の付いたオブジェクトを持っていると仮定していますitems
バットマン

1
確かにその質問に対する有用な答えではありませんが(Xを制限せずに、X回繰り返す方法を具体的にグーグルで検索しました)、それでも有用なコードです。
MacK 2016年

65

これは私が考えることができる最も簡単な回避策です。

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

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


2
周りに座っているコントローラーの機能を使用せずに、賢くて非常に便利です。これが角度のある機能ではない理由はまだ困惑しています
MacK 2016年

1
これが答えになるはずです。OPは「forのようにng-repeatを使用する」ことを求めました。これは、コントローラーからの「支援」なしに、すべての実装をビューに直接含めることを意味します。このソリューションはまさにそれを実行します...そして起動するのは非常に賢いです。
karfus 2016

素晴らしいですが、すべてのAngularバージョンで機能するとは限りません。私は1.2.9を使用していますが、サポートされていません:Error: [$parse:isecfld]
Emaborsa 2016

50

javascript配列オブジェクトでsliceメソッドを使用できます

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

ショートアンドスウィート


2
なぜそれが間違っているのですか?できます。配列インデックスから2から4までの配列要素が必要な場合は、別のシナリオを考えてみましょう。limitToフィルターで動作しますか?
ギハン2015年

4
それは間違いではありませんが、item in items|limitTo:4
それほど

1
これにより、アイテム1〜4を表示し、ボタンをクリックして.slice(0,4)を.slice(5,8)に変更できる機能が追加され、単純なページネーターが可能になります。ありがとう!
BaneStar007 2018年

39

HTMLで:

<div ng-repeat="t in getTimes(4)">text</div>

とコントローラーで:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

編集:

anglejs> 1.2.xの場合

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
その他のオプション:t in [1,2,3,4]またはt in 'aaaa' など:)
Valentyn Shybanov 2013年

4
Angularが数学ループをサポートするための関数を必要とせずにそれをサポートできないのは奇妙に思えます。
グイドアンセルミ2014年

4
ええ、私はそれを次のように書いて、30回繰り返す必要があることを想像することができ[1,2,3,4]ます..これはなんと悲惨な解決策
Matej

2
より良い解決策については、DavidLinによる以下の回答を参照してください。
SamHuckaby 2014年

@SamHuckabyの問題は、範囲を反復処理することです。その場合、limitToは役に立ちません。それは、それ自体が何かを意味する値のセットを反復することではなく、たとえば4回反復します。既存の配列のスライスを4回反復するのではなく、4回だけ反復します。「[0..4]」のようにアドホックスライスを作成するときのcoffeescriptのように、実際の値は気にせず、操作を4回繰り返すだけです。
mpm 2014年

13

@mpmによる回答が機能せず、エラーが発生します

リピーターでの複製は許可されていません。'track by'式を使用して、一意のキーを指定します。リピーター:{0}、重複キー:{1}

と一緒にこれを避けるために

ng-repeat = "t in getTimes(4)"

使用する

$ indexで追跡する

このような

<div ng-repeat = "t in getTimes(4)track by $ index">テキスト</ div>


私のテクニックは、使用したバージョンのangularjsで機能しました。plunkrを確認するだけで、できるだけ早く更新します。
mpm 2014年

10

繰り返すには7回、持つ配列を使用するようにしてください長= 7、その後、追跡、それをすることによって $インデックス

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]空の配列«b»を作成し、その
.length=7サイズを«7»に設定
&&bし、新しい配列«b»をng-repeatで使用できるようにします。
track by $indexここで、«$ index»は反復の位置です。
ng-bind="$index + 1"1から始まる表示。

X回繰り返すには:7Xに
置き換えるだけです。


この回答が何を提供するのか、受け入れられた回答、または2つの高い投票の回答でまだカバーされていないのか不明です。
JamesT 2015

Angularがいかに強力であるか以上のことはありません。
Funnyniko 2015

3
投票数の多い2つの回答は、«items»が配列であると想定しているようです。これにより、アレイが所定の位置に配置されます。
Funnyniko 2015

よくやった、それは動作します。これは、OPの質問に実際に対処する唯一のソリューションです。投票数が少ないのは驚くべきことです。もっとエレガントな解決策があるのだろうか。
Healforgreen 2016年

3

ここでのすべての回答は、アイテムが配列であると想定しているようです。ただし、AngularJSでは、オブジェクトである可能性もあります。その場合、limitToによるフィルタリングもarray.sliceによるフィルタリングも機能しません。考えられる解決策の1つとして、オブジェクトキーを失ってもかまわない場合は、オブジェクトを配列に変換できます。これを行うためのフィルターの例を次に示します。

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

配列になったら、他の回答に記載されているように、sliceまたはlimitToを使用します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.