Η Angular παρέχει κάποια υποστήριξη για έναν βρόχο for χρησιμοποιώντας αριθμούς μέσα στις οδηγίες HTML:
<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>
Αυτό λειτουργεί, αλλά είναι περιττό αφού δεν θα χρησιμοποιήσουμε καθόλου τον πίνακα range μέσα στον βρόχο. Γνωρίζει κανείς τον καθορισμό ενός εύρους ή μιας κανονικής για την ελάχιστη/μέγιστη τιμή;
Κάτι σαν:
<div data-ng-repeat="i in 1 .. 100">
do something
</div>
Βελτίωσα λίγο αυτή την απάντηση και κατέληξα σε [αυτό το βιολί][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>
Βρήκα μια ελαφρώς διαφορετική σύνταξη που μου ταιριάζει λίγο περισσότερο και προσθέτει επίσης ένα προαιρετικό κατώτερο όριο:
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, θα εκτυπώσει:<br />, κάνει κάτι με τον αριθμό 0<br />, κάνει κάτι νούμερο 1<br />, κάνε κάτι νούμερο 2<br />, κάνε κάτι νούμερο 3<br />, κάντε κάτι νούμερο 4<br />, κάντε κάτι νούμερο 5<br />, κάντε κάτι νούμερο 6<br />, κάντε κάτι νούμερο 7<br />, κάντε κάτι νούμερο 8<br />, κάνετε κάτι νούμερο 9