Υπάρχει τρόπος να επαναλαμβάνετε με ng έναν καθορισμένο αριθμό φορών αντί να πρέπει πάντα να επαναλαμβάνετε έναν πίνακα;
Για παράδειγμα, παρακάτω θέλω το στοιχείο της λίστας να εμφανιστεί 5 φορές υποθέτοντας ότι το $scope.number
είναι ίσο με 5, επιπλέον αυξάνοντας τον αριθμό ώστε κάθε στοιχείο της λίστας να αυξάνεται όπως 1, 2, 3, 4, 5
Επιθυμητό αποτέλεσμα:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Προς το παρόν, το ng-repeat
δέχεται μόνο μια συλλογή ως παράμετρο, αλλά θα μπορούσατε να κάνετε κάτι τέτοιο:
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
Και κάπου στον ελεγκτή σας:
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Αυτό θα σας επέτρεπε να αλλάξετε το $scope.number
σε οποιονδήποτε αριθμό θέλετε και να διατηρήσετε τη δέσμευση που ψάχνετε.
[Εδώ είναι ένα fiddle][1] με μερικές λίστες που χρησιμοποιούν την ίδια συνάρτηση getNumber
.
ΕΠΕΞΕΡΓΑΣΊΑ 1/6/2014: Οι νεότερες εκδόσεις της Angular 1.x κάνουν χρήση της ακόλουθης σύνταξης:
<li ng-repeat="i in getNumber(number) track by $index">
EDIT 9/25/2018: Οι νεότερες εκδόσεις του Angular 1.x σας επιτρέπουν να το κάνετε αυτό χωρίς συνάρτηση. Αν ο κώδικάς σας είναι απλός και δεν χρειάζεστε μια συνάρτηση getNumber
για άλλους λόγους, μπορείτε τώρα να την παραλείψετε και να κάνετε μόνο αυτό:
<div ng-repeat="x in [].constructor(number) track by $index">
Πίστωση στον @Nikhil Nambiar από την απάντησή του παρακάτω για αυτή την ενημέρωση
Ακολουθεί ένα παράδειγμα για το πώς θα μπορούσατε να το κάνετε αυτό. Σημειώστε ότι εμπνεύστηκα από ένα σχόλιο στα έγγραφα ng-repeat:
Σημειώστε την οδηγία ng-repeat:
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Εδώ είναι ο ελεγκτής:
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};
Νομίζω ότι αυτό το [jsFiddle][1] από αυτό το νήμα μπορεί να είναι αυτό που ψάχνετε.
<div ng-app ng-controller="Main">
<div ng-repeat="item in items | limitTo:2">
{{item.name}}
</div>
</div>