Angular bietet einige Unterstützung für eine for-Schleife mit Zahlen innerhalb seiner HTML-Direktiven:
<div data-ng-repeat="i in [1,2,3,4,5]">
do something
</div>
Aber wenn Ihre Bereichsvariable einen Bereich mit einer dynamischen Zahl enthält, müssen Sie jedes Mal ein leeres Array erstellen.
In der Steuerung
var range = [];
for(var i=0;i<total;i++) {
range.push(i);
}
$scope.range = range;
In der HTML
<div data-ng-repeat="i in range">
do something
</div>
Dies funktioniert, aber es ist unnötig, da wir den Bereich Array überhaupt nicht innerhalb der Schleife verwenden werden. Weiß jemand, wie man einen Bereich oder einen regulären Wert für min/max einstellt?
Etwas wie:
<div data-ng-repeat="i in 1 .. 100">
do something
</div>
Ich habe diese Antwort ein wenig überarbeitet und bin auf [diese Fiddle][2] gekommen.
Filter definiert als:
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;
};
});
Mit der Wiederholung, die wie folgt verwendet wird:
<div ng-repeat="n in [] | range:100">
do something
</div>
Ich habe mir eine etwas andere Syntax ausgedacht, die mir mehr zusagt und auch eine optionale Untergrenze enthält:
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;
};
});
die Sie als
<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>
oder
<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>
Für diejenigen, die neu in Angularjs sind. Der Index kann durch die Verwendung von $index erhalten werden.
Zum Beispiel:
<div ng-repeat="n in [] | range:10">
do something number {{$index}}
</div>
Was, wenn Sie den praktischen Filter von Gloopy'verwenden, ausdrucken wird:
etwas tun Nummer 0
mache etwas Nummer 1
mache etwas Nummer 2
tu etwas Nummer 3
tu etwas Nummer 3<br />
tu etwas Nummer 4
tu etwas Nummer 5
tu etwas Nummer 6
tu etwas Nummer 7
etwas tun Nummer 8
etwas tun Nummer 9