1. ホーム
  2. angularjs

[解決済み】AngularJS 数値と範囲を指定したループ

2022-04-03 11:11:55

質問

AngularはHTMLディレクティブの中で数字を使ったforループのサポートをいくつか提供しています。

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something
</div>

しかし、スコープ変数が動的な数値を持つ範囲を含んでいる場合、毎回空の配列を作成する必要があります。

コントローラで

var range = [];
for(var i=0;i<total;i++) {
  range.push(i);
}
$scope.range = range;

HTMLの中で

<div data-ng-repeat="i in range">
  do something
</div>

これは動作しますが、ループ内で範囲配列を全く使用しないので不要です。どなたか、範囲指定や最小値・最大値の正規の設定方法をご存じないでしょうか?

のようなものです。

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>

解決方法は?

をいじりました。 この答え を少し考えて、次のようになりました。 このフィドル .

と定義されたフィルター。

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});

repeatはこのように使用します。

<div ng-repeat="n in [] | range:100">
  do something
</div>