web-dev-qa-db-ja.com

配列を繰り返す代わりに、定義した回数をng-repeatする方法はありますか。

常に配列を反復処理する代わりに、定義された回数だけng-repeatする方法はありますか？

たとえば、以下では、$scope.numberが5に等しく、さらに数値が1、2、3、4、5のように増加すると仮定して、リストアイテムを5回表示するようにします。

望ましい結果：

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>
angularjsangularjs-ng-repeatng-repeat
404
Malcr001

現時点では、ng-repeatはパラメータとしてコレクションのみを受け付けますが、これを行うこともできます。

<ul>
    <li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>

そしてあなたのコントローラのどこかに：

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

これにより、$scope.numberを好きなように任意の数に変更しても、探しているバインディングを維持することができます。

これはフィドルです 同じgetNumber関数を使ったリストがいくつかあります。

EDIT 1/6/2014 ：新しいバージョンのAngular 1.xでは、次の構文を使用しています。

<li ng-repeat="i in getNumber(number) track by $index">

EDIT 9/25/2018 ：新しいバージョンのAngular 1.xでは、これを関数なしで行うことができます。あなたのコードが単純で、他の理由でgetNumber関数を必要としないのであれば、それを省略して以下のようにすることができます。

<div ng-repeat="x in [].constructor(number) track by $index">

この更新のための下記の彼の答えからの@Nikhil Nambiarへの功績

551
Dan

あなたはこれを行うことができます：

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
130
akonsu

これがどうやってできるかの例です。私はng-repeatのドキュメントのコメントに触発されたことに注意してください： http://jsfiddle.net/digitalzebra/wnWY6/

Ng-repeatディレクティブに注意してください。

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

これがコントローラです。

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};
93
Polaris878

私はこの jsFiddle から/この スレッド を探しているのかもしれません。

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>
80
jeffmayeur

もっと簡単な方法は（5回の例では）：

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>
53
Nikhil Nambiar

私は同じ問題に遭遇しました。私はこのスレッドに出くわしましたが、彼らがここで持っていた方法が好きではありませんでした。私の解決策はunderscore.jsを使っていました。それはこれと同じくらい簡単です：

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

これはまさにあなたが探していることをするでしょう。

49
Mark Roach

私は自分のhtmlを最小限に抑えたいので、他の人がやったように配列[0,1,2、...]を作成する小さなフィルターを定義しました：

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.Push(i);
      }
      return res;
    };
  });

その後、ビュー上でこのように使用することが可能です：

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>
48
miguelr

これは本当に醜いですが、それは整数または変数のどちらかのためのコントローラなしで動作します：

整数：

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

変数：

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>
33
Michael A. Jackson

これを行うには多くの方法があります。私はコントローラにロジックを持つことに本当に悩まされたので、要素をn回繰り返す問題を解決するための簡単なディレクティブを作成しました。

インストール：

ディレクティブはbower install angular-repeat-nを使ってインストールすることができます。

例： 

<span ng-repeat-n="4">{{$index}}</span

生成されます：1234

スコープ変数を使っても動作します。

<span ng-repeat-n="repeatNum"></span>

出典：

Github

16
connorbode

これは受け入れられた答えのほんのわずかな変化ですが、あなたは本当に new 関数を作成する必要はありません。スコープに 'Array'をインポートするためだけに：

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

実例は このフィドル を参照してください。

13
Sylvain Leroux

最も簡単な答え：2行のコード

JS（あなたのAngularJSコントローラ内） 

$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy

_ html _ 

<div ng-repeat="i in range.slice(0,repeatCount) track by $index"></div>

...ここでrepeatCountはこの場所に現れるべき繰り返しの数です。

9
JellicleCat

angleは slice と呼ばれるとても甘い関数を与えます。これを使ってあなたが探しているものを達成することができます。 例：ng-repeat = "ab in abc.slice（startIndex、endIndex）"

このデモ： http://jsfiddle.net/sahilosheal/LurcV/39/ はあなたを助け、この「人生を楽にする」機能の使い方を教えてくれます。 :)

html：

<div class="div" ng-app >
    <div ng-controller="Main">
        <h2>sliced list(conditional NG-repeat)</h2>
        <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>
        <h2>unsliced list( no conditional NG-repeat)</h2>
         <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>

    </div>

CSS：

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

ng-JS：

 function ctrlParent ($scope) {
    $scope.abc = [
     { "name": "What we do", url: "/Home/AboutUs" },
     { "name": "Photo Gallery", url: "/home/gallery" },
     { "name": "What we work", url: "/Home/AboutUs" },
     { "name": "Photo play", url: "/home/gallery" },
     { "name": "Where", url: "/Home/AboutUs" },
     { "name": "playground", url: "/home/gallery" },
     { "name": "What we score", url: "/Home/AboutUs" },
     { "name": "awesome", url: "/home/gallery" },
     { "name": "oscar", url: "/Home/AboutUs" },
     { "name": "american hustle", url: "/home/gallery" }
    ];
}
function Main($scope){
    $scope.items = [{sort: 1, name: 'First'}, 
                    {sort: 2, name: 'Second'}, 
                    {sort: 3, name: 'Third'}, 
                    {sort: 4, name:'Last'}];
    }
8
sheelpriy

ng-ifディレクティブはng-repeatと一緒に使用できます。

したがって、numが要素の繰り返し回数であれば、

<li ng-repeat="item in list" ng-if="$index < num">
6
akaashanky

角度1.2.xの答えがあります。

基本的にはng-repeatのわずかな変更を除いて同じです。

<li ng-repeat="i in getNumber(myNumber) track by $index">

ここにフィドルがあります： http://jsfiddle.net/cHQLH/153/

これは、Angular 1.2ではディレクティブで重複する値を使用できないためです。これはあなたが以下をやろうとしているなら、あなたはエラーを受けることを意味します。

<li ng-repeat="x in [1,1,1]"></li>
6
DrogoNevets

Ivanの最初の答えを少し拡張して、文字が一意である限り、track byステートメントなしで文字列をコレクションとして使用できます。 ：

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

これは少し気味が悪いですが、確認するのに十分なほど単純で、特に混乱を招くことはありません。

3
omikes

CoffeeScriptを使用しているユーザーの場合、範囲内包表記を使用できます。

指令 

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

またはコントローラー 

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

テンプレート 

<div ng-repeat="i in range">[ the rest of your code ]</div>
3
Roi

まず、LoDashを使って角度フィルタを作成します。

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

LoDashのtimes関数は、null、未定義、0、数字、および数字の文字列表現を処理できます。

それから、あなたのHTMLの中でこれを使います。

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

または

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>
2
Karanvir Kang

この例を使うことができます。

内部コントローラー

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

HTMLコード側のselect要素の例：

<select ng-model="data.myVal" value="{{ data.myVal }}">
    <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>
2
elceka

Nが大きすぎない場合は、split（ ''）をn文字の文字列とともに使用することもできます。

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>
1
vonwolf

私は同じ問題に遭遇し、これは私が出てきたものです：

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

...そしてhtml：

<div repeat-times="4">{{ $index }}</div>

ライブ例

プロジェクトですでにアンダースコアのtimes関数を使用していましたが、ネイティブコードで簡単に置き換えることができます。

1
nicooga

Angularはコレクションを修正するためのフィルタを提供します。この場合、コレクションはnull、つまり[]になり、次のようにフィルタも引数を取ります。

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS：

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

この方法は上記で提案した方法と非常によく似ており、必ずしも優れているわけではありませんが、Angular JSのフィルタの能力を示しています。

1
Nik Dow

文字列を反復処理するので、それは各charに対してアイテムをレンダリングします。

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

ugly を使用できますが、ネイティブフィルタnumber|n decimal placesを使用したコードなしの回避策です。

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

このようにして、余分なコードなしでmynumber要素ができます。 '0.000'と言います。
mynumber - 2を補うために0.を使います
これは3未満の数値では機能しませんが、場合によっては便利な場合があります。

0
Ivan Ferrer Villa
$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>
0
DuFuS

最大数が別のng-repeatから来る再利用可能なディレクティブを作成しています。だから、これは最高の投票の答えを編集したものです。

これをコントローラのコードを変更するだけです - 

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.Push(j)
    }
    return temp; 
}

これは指定された回数の繰り返しで新しい配列を返します

0
sagars01

私はこれに対してもっと動的な解決策を必要としていました - 私が繰り返しを増やすことができるところで。

HTML

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

デュプリケータ制御

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.Push(primaryValue)
}
0
adswebwork