Angular の for ループ

AngularJs の for ループを紹介し、for ループを使用してデータを表示します。

Angular の for ループ

for ループは便利で、データを表示するためにコードを何度も繰り返すために使用されます。

それを理解するために、AngularJs の for ループの例を見てみましょう。まず、テンプレートを作成します。

# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>{{n}}</h1>
</div>

上記のコードでは、ng-repeat を使用しました。それでは、n の値を表示するための for ループを作成しましょう。

# angularjs
var myApp = angular.module('ForApp', []);
myApp.filter('repeat', function() {
  return function(input, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      input.push(i);
    return input;
  };
});

上記のコードは、n 値を 5 回出力します。

画像でわかるように、上記のコードは n の値を 5 回示しています。for ループを使用して、特定の HTML コードを何度も繰り返すこともできます。

# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>Repeated for {{n}} times</h1>
</div>

出力：

このようにして、AngularJs で for ループを使用できます。