Itération ng-répéter seulement X fois dans AngularJs

86

Comment puis-je utiliser ng-repeat comme pour Javascript?

exemple:

<div ng-repeat="4">Text</div>

Je veux itérer avec ng-repeat 4 fois, mais comment puis-je le faire?

Vural
la source
3
Les deux sont possibles: les directives ont des noms en boîtier chameau tels que ngBind. La directive peut être invoquée en traduisant le nom de cas du chameau en cas de serpent avec ces caractères spéciaux:, - ou _. En option, la directive peut être préfixée avec x- ou data- pour la rendre compatible avec le validateur HTML.
asgoth
2
wow comment se fait-il tant de mauvaises réponses, vous devriez utiliser ng-repeat = "item in items | limitTo: 4"
Toolkit
Il y a une chance qu'il n'ait pas de tableau à parcourir. Dites, pour afficher les étoiles dans un classement par étoiles. Il peut y avoir un champ pour le nombre d'étoiles que vous devez afficher, mais ce n'est pas itérable.
nirazul
@Toolkit ... et qu'est-ce que items..?
TJ

Réponses:

342

Angular est livré avec un filtre limitTo: limit, il prend en charge la limitation des x premiers éléments et des x derniers éléments:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>
David Lin
la source
14
Cela devrait être la réponse, car cela fonctionne également avec une itération sur des objets dans un tableau. De plus, c'est une fonction angulaire.
Ashley Coolman
29
C'est un morceau de code incroyablement utile, mais cela ne répond pas réellement à la question du PO. Il cherche simplement un moyen de répéter n fois et n'a probablement pas d'objet réel à parcourir.
SamHuckaby
2
cela devrait être la réponse, il utilise les outils fournis par AngularJS core
Udo
10
Cela ne résout pas réellement le problème. Vous supposez qu'il a un objet nomméitems
Batman
1
Pas une réponse utile à la question en effet (j'ai recherché spécifiquement comment itérer X fois, et non pas limiter X) mais un morceau de code utile néanmoins.
MacK
65

C'est la solution de contournement la plus simple à laquelle je puisse penser.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Voici un exemple de Plunker.

ChandrasekarG
la source
2
Intelligent et très utile sans utiliser aucune fonction du contrôleur assis. Toujours perplexe pourquoi ce n'est pas une caractéristique angulaire
MacK
1
Cela devrait être la réponse . OP a demandé "en utilisant ng-repeat comme pour". Cela implique d'avoir toute l'implémentation directement dans la vue, sans aucune "assistance" de la part du contrôleur. Cette solution fait exactement cela ... et est vraiment intelligente pour démarrer.
karfus
Bien, mais ne fonctionne pas sur toutes les versions angulaires. J'utilise 1.2.9 et ce n'est pas pris en charge:Error: [$parse:isecfld]
Emaborsa
50

Vous pouvez utiliser la méthode slice dans un objet de tableau javascript

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Court n doux

Gihan
la source
2
pourquoi c'est faux ?. Ça marche. Prenons un autre scénario, si vous voulez des éléments de tableau de 2 à 4 à partir d'index de tableau. Fonctionne-t-il avec le filtre limitTo?
Gihan
4
Ce n'est pas faux, ce n'est pas aussi simple queitem in items|limitTo:4
CENT1PEDE
1
Cela ajoute la fonctionnalité que je pourrais afficher les éléments 1-4, puis cliquer sur un bouton pour changer .slice (0,4) en .slice (5,8), permettant un simple paginateur. Merci!
BaneStar007
39

dans le html:

<div ng-repeat="t in getTimes(4)">text</div>

et dans le contrôleur:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

ÉDITER :

avec angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
mpm
la source
19
autres options: t in [1,2,3,4]ou t in 'aaaa' etc :)
Valentyn Shybanov
4
Cela semble étrange qu'Angular ne puisse pas prendre en charge une boucle mathématique sans nécessiter une fonction pour la sauvegarder.
Guido Anselmi le
4
Ouais, je peux imaginer devoir itérer 30x, l'écrire comme [1,2,3,4].. Quelle triste solution celle-ci
Matej
2
Voir ci-dessous la réponse de DavidLin pour une meilleure solution.
SamHuckaby
@SamHuckaby, le problème se répète sur une plage.limitTo est inutile dans ce cas. Il ne s'agit pas d'itérer sur un ensemble de valeurs qui signifient quelque chose par elles-mêmes, c'est d'itérer 4 fois par exemple, pas 4 fois sur une tranche d'un tableau existant, juste 4 fois. tout comme dans coffeescript lorsque vous créez une tranche ad hoc, comme "[0..4]", vous ne vous souciez pas vraiment des valeurs réelles, juste que vous répéterez une opération 4 fois.
mpm
13

La réponse donnée par @mpm ne fonctionne pas elle donne l'erreur

Les doublons dans un répéteur ne sont pas autorisés. Utilisez l'expression 'track by' pour spécifier des clés uniques. Répéteur: {0}, clé en double: {1}

Pour éviter cela avec

ng-repeat = "t dans getTimes (4)"

utilisation

suivi par $ index

comme ça

<div ng-repeat = "t dans la piste getTimes (4) par $ index"> TEXT </div>

Pratik Goenka
la source
ma technique a fonctionné avec la version d'angularjs que j'ai utilisée. Il suffit de vérifier le plunkr, je vais le mettre à jour dès que possible.
mpm
10

Pour répéter 7 fois, essayez d'utiliser un tableau avec une longueur = 7 , puis suivez- le par $ index :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]créer un tableau vide «b»,
.length=7mettre sa taille à «7»,
&&blaisser le nouveau tableau «b» être disponible pour ng-repeat,
track by $index«$ index» est la position de l'itération.
ng-bind="$index + 1"affichage à partir de 1.

Pour répéter X fois: il
suffit de remplacer 7 par X .

funnyniko
la source
On ne sait pas ce que cette réponse fournit qui n'est pas déjà couvert par la réponse acceptée ou par les deux votes les plus élevés.
JamesT
Rien de plus que la puissance angulaire.
funnyniko
3
Les deux réponses aux votes plus élevés semblent supposer que «items» est un tableau. Celui-ci met le tableau en place.
funnyniko
Bien joué, ça marche. C'est la seule solution qui répond réellement à la question du PO. C'est étonnant qu'il n'ait que quelques votes. Je me demande simplement s'il existe une solution plus élégante.
Healforgreen
3

Toutes les réponses ici semblent supposer que les éléments sont un tableau. Cependant, dans AngularJS, cela pourrait aussi bien être un objet. Dans ce cas, ni le filtrage avec limitTo ni array.slice ne fonctionnera. Comme solution possible, vous pouvez convertir votre objet en tableau, si cela ne vous dérange pas de perdre les clés d'objet. Voici un exemple de filtre pour faire exactement cela:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Une fois qu'il s'agit d'un tableau, utilisez slice ou limitTo, comme indiqué dans d'autres réponses.

Par Aronsson Quested
la source