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>
この回答を少し調整して、この fiddleを思いつきました。
次のように定義されたフィルタ:
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つの定義された数値の間の範囲を作成するための、さらに単純なバージョンを思いつきました。5～15
HTML :
<ul>
<li ng-repeat="n in range(5,15)">Number {{n}}</li>
</ul>
コントローラー：
$scope.range = function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) {
input.push(i);
}
return input;
};
プレーンな Javascript だけです (コントローラーは必要ありません):
<div ng-repeat="n in [].constructor(10) track by $index">
{{ $index }}
</div>
モックアップするときに非常に便利
私は少し異なる構文を思いつきました。これはもう少し自分に合っていて、オプションの下限も追加します。
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>
anglejsを初めて使用する人向け。インデックスは$indexを使用して取得できます。
例えば：
<div ng-repeat="n in [] | range:10">
do something number {{$index}}
</div>
これは、Gloopyの便利なフィルターを使用している場合、
次
の
よう
に
出力
し
ます
。
何か番号9をする
これを行う簡単な方法は、Underscore.js の _.range() メソッドを使用することです。:)
http://underscorejs.org/#range
// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);
// val will be each number in the array not the index.
<div ng-repeat='val in range'>
{{ $index }}: {{ val }}
</div>
カスタムng-repeat-rangeディレクティブを使用します。
/**
* Ng-Repeat implementation working with number ranges.
*
* @author Umed Khudoiberdiev
*/
angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) {
return {
replace: true,
scope: { from: '=', to: '=', step: '=' },
link: function (scope, element, attrs) {
// returns an array with the range of numbers
// you can use _.range instead if you use underscore
function range(from, to, step) {
var array = [];
while (from + step <= to)
array[array.length] = from += step;
return array;
}
// prepare range options
var from = scope.from || 0;
var step = scope.step || 1;
var to = scope.to || attrs.ngRepeatRange;
// get range of numbers, convert to the string and add ng-repeat
var rangeString = range(from, to + 1, step).join(',');
angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']');
angular.element(element).removeAttr('ng-repeat-range');
$compile(element)(scope);
}
};
}]);
そしてhtmlコードは
<div ng-repeat-range from="0" to="20" step="5">
Hello 4 times!
</div>
または単に
<div ng-repeat-range from="5" to="10">
Hello 5 times!
</div>
または単に
<div ng-repeat-range to="3">
Hello 3 times!
</div>
あるいは単に
<div ng-repeat-range="7">
Hello 7 times!
</div>
最も簡単なコードなしの解決策は、配列を範囲で初期化し、オフセットしたいだけ $index + を使用することでした:
<select ng-init="(_Array = []).length = 5;">
<option ng-repeat="i in _Array track by $index">{{$index+5}}</option>
</select>
コントローラーを変更せずに、これを使用できます。
ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index"
楽しみ！
angular.filter モジュール ( https://github.com/a8m/angular-filter )で「after」または「before」フィルターを使用できます。
$scope.list = [1,2,3,4,5,6,7,8,9,10]
HTML:
<li ng-repeat="i in list | after:4">
{{ i }}
</li>
結果: 5、6、7、8、9、10
JS (AngularJS コントローラー内)
$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat
HTML
<div data-ng-repeat="i in range.slice(0,myCount) track by $index"></div>
...myCountこの場所に表示される星の数はどこにありますか。
$indexあらゆる追跡操作に使用できます。たとえば、インデックスにミューテーションを出力したい場合は、次のようにdiv.
{{ ($index + 1) * 0.5 }}
UnderscoreJS の使用:
angular.module('myModule')
.run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);
これを適用すると、$rootScopeどこでも利用できるようになります:
<div ng-repeat="x in range(1,10)">
{{x}}
</div>
非常に単純なもの：
$scope.totalPages = new Array(10);
<div id="pagination">
<a ng-repeat="i in totalPages track by $index">
{{$index+1}}
</a>
</div>
これは jzm の改善された回答です (他にコメントすることはできません。エラーが含まれているため、彼女/彼の回答にコメントします)。関数には開始/終了範囲の値があるため、より柔軟で...機能します。この特定のケースは、日付の場合です。
$scope.rangeCreator = function (minVal, maxVal) {
var arr = [];
for (var i = minVal; i <= maxVal; i++) {
arr.push(i);
}
return arr;
};
<div class="col-sm-1">
<select ng-model="monthDays">
<option ng-repeat="day in rangeCreator(1,31)">{{day}}</option>
</select>
</div>
パーティーに遅刻。しかし、私はこれをやっただけです：
コントローラーで:
$scope.repeater = function (range) {
var arr = [];
for (var i = 0; i < range; i++) {
arr.push(i);
}
return arr;
}
HTML:
<select ng-model="myRange">
<option>3</option>
<option>5</option>
</select>
<div ng-repeat="i in repeater(myRange)"></div>
<div ng-init="avatars = [{id : 0}]; flag = true ">
<div ng-repeat='data in avatars' ng-if="avatars.length < 10 || flag"
ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''; flag = avatars.length <= 10 ? true : false">
<img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg">
</div>
</div>
コントローラーやファクトリーなしでhtmlでこれを実現したい場合。
私は次のことを試しましたが、私にとってはうまくいきました：
<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>
角度 1.3.6
私はこれをかき立てて、それがいくつかの人にとって役立つかもしれないことを見ました. (はい、CoffeeScript です。私を訴えてください。)
app.directive 'times', ->
link: (scope, element, attrs) ->
repeater = element.html()
scope.$watch attrs.times, (value) ->
element.html ''
return unless value?
element.html Array(value + 1).join(repeater)
使用するには:
<div times="customer.conversations_count">
<i class="icon-picture></i>
</div>
これはもっと簡単になりますか？
Angular は、正当な理由もなく常にフィルターを再評価するのが好きなので、私はフィルターに警戒しています。私のようにフィルターが何千もあると、大きなボトルネックになります。
このディレクティブは、モデルの変更も監視し、それに応じて要素を更新します。
これは最も単純な変形です: 整数の配列を使用するだけです....
<li ng-repeat="n in [1,2,3,4,5]">test {{n}}</li>