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>
これは動作しますが、ループ内でレンジ配列を一切使用しないので不要です。どなたか、範囲を設定したり、min/max値を定期的に設定する方法をご存知ですか?
こんな感じで。
<div data-ng-repeat="i in 1 .. 100">
do something
</div>
この答え]1に少し手を加えて、[このフィドル][2]になりました。
フィルターの定義は
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;
};
});
リピートはこのように使います。
<div ng-repeat="n in [] | range:100">
do something
</div>
[2]:
私は、もう少し自分に合った構文を考え、オプションで下限値も追加しました。
myApp.filter('makeRange', function() {
return function(input) {
var lowBound, highBound;
switch (input.length) {
case 1:
lowBound = 0;
highBound = parseInt(input[0]) - 1;
break;
case 2:
lowBound = parseInt(input[0]);
highBound = parseInt(input[1]);
break;
default:
return input;
}
var result = [];
for (var i = lowBound; i <= highBound; i++)
result.push(i);
return result;
};
});
として使用することができます。
<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>
または
<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>
angularjsを初めて使う人のために。 インデックスは$indexを使って取得できます。
例えば、以下のようになります。
<div ng-repeat="n in [] | range:10">
do something number {{$index}}
</div>
これは、Gloopy'の便利なフィルタを使用している場合、次のように表示されます:
0番のことをする
何かをする番号1
何かしたい番号2
。
何かをする3番
。
何かをする4番
。
何かをする5番
。
何かをする6番
。
何かをする7番
。
何かをする8番
。
何かをする9番