Iterazione ng-repeat solo X volte in AngularJs


86

Come posso usare ng-repeat come per in Javascript?

esempio:

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

Voglio iterare con ng-repeat 4 volte ma come posso farlo?


3
Entrambi sono possibili: le direttive hanno nomi in maiuscolo come ngBind. La direttiva può essere richiamata traducendo il nome del caso del cammello in un caso del serpente con questi caratteri speciali:, - o _. Facoltativamente, la direttiva può essere preceduta da x- o data- per renderla compatibile con il validatore HTML.
previsto il

2
wow, come mai tante risposte sbagliate, dovresti usare ng-repeat = "item in items | limitTo: 4"
Toolkit

È possibile che non abbia alcun array su cui eseguire l'iterazione. Dì, per visualizzare le stelle in una valutazione a stelle. Potrebbe esserci un campo per il numero di stelle che devi visualizzare, ma non è iterabile.
nirazul

@Toolkit ... e cos'è items..?
TJ

Risposte:


342

Angular viene fornito con un filtro limitTo: limit, supporta la limitazione dei primi x elementi e degli ultimi x elementi:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
Questa dovrebbe essere la risposta, poiché funziona anche con l'iterazione su oggetti in un array. Inoltre è una caratteristica angolare.
Ashley Coolman

29
Questo è un pezzo di codice incredibilmente utile, ma in realtà non soddisfa la domanda dell'OP. Sta semplicemente cercando un modo per ripetere n volte e probabilmente non ha un oggetto reale su cui iterare.
SamHuckaby

2
questa dovrebbe essere la risposta, utilizza gli strumenti forniti da AngularJS core
Udo

10
Questo in realtà non risolve il problema. Stai assumendo che abbia un oggetto chiamatoitems
Batman

1
Non una risposta utile per la domanda in effetti (ho cercato su Google specificamente come iterare X volte e non limitare X) ma comunque utile pezzo di codice.
MacK

65

Questa è la soluzione più semplice a cui potessi pensare.

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

Ecco un esempio di Plunker.


2
Intelligente e molto utile senza utilizzare alcuna funzione nel controller seduto intorno. Ancora sconcertato perché questa non è una caratteristica angolare
MacK

1
Questa dovrebbe essere la risposta . OP ha chiesto di "usare ng-repeat come per". Ciò implica avere tutta l'implementazione direttamente nella vista, senza alcun "aiuto" da parte del controllore. Questa soluzione fa esattamente questo ... ed è dannatamente intelligente per l'avvio.
karfus

Bello, ma non funziona su tutte le versioni angolari. Sto usando 1.2.9 e non è supportato:Error: [$parse:isecfld]
Emaborsa

50

È possibile utilizzare il metodo slice nell'oggetto array javascript

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

Breve n dolce


2
perché è sbagliato ?. Funziona. Prendiamo un altro scenario, se vuoi elementi di matrice da 2 a 4 da indici di matrice. Funziona con limitTo filter?
Gihan

4
Non è sbagliato, non è così facile comeitem in items|limitTo:4
CENT1PEDE

1
Questo aggiunge la funzionalità che potrei mostrare gli elementi 1-4, quindi fare clic su un pulsante per cambiare .slice (0,4) in .slice (5,8), consentendo un semplice impaginatore. Grazie!
BaneStar007

39

nell'html:

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

e nel controller:

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

MODIFICARE :

con angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
altre opzioni: t in [1,2,3,4]o t in 'aaaa' ecc :)
Valentyn Shybanov

4
Sembra strano che Angular non possa supportare un ciclo matematico senza richiedere una funzione per supportarlo.
Guido Anselmi

4
Sì, posso immaginare di dover iterare 30x, scrivendolo come [1,2,3,4].. Che soluzione triste questa
Matej

2
Vedi sotto la risposta di DavidLin per una soluzione migliore.
SamHuckaby

@SamHuckaby il problema sta ripetendo su un range.limitTo è inutile in quel caso. Non si tratta di iterare su un insieme di valori che significano qualcosa da soli, si iterano per esempio 4 volte, non 4 volte su una fetta di un array esistente, solo 4 volte. proprio come in coffeescript quando crei una slice ad hoc, come "[0..4]", non ti interessano veramente i valori effettivi, solo che ripeterai un'operazione 4 volte.
mpm

13

La risposta data da @mpm non funziona dà l'errore

Non sono consentiti duplicati in un ripetitore. Usa l'espressione "track by" per specificare chiavi univoche. Ripetitore: {0}, chiave duplicata: {1}

Per evitare questo insieme a

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

uso

traccia per $ index

come questo

<div ng-repeat = "t in getTimes (4) track by $ index"> TEXT </div>


la mia tecnica ha funzionato con la versione di angularjs che ho usato. Basta controllare il plunkr, lo aggiornerò al più presto.
mpm

10

Per ripetere 7 volte, tenta di utilizzare un array con una lunghezza = 7 , quindi monitorare esso da $ index :

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

b=[]crea un array vuoto «b»,
.length=7imposta la sua dimensione a «7»,
&&blascia che il nuovo array «b» sia disponibile per ng-repeat,
track by $indexdove «$ index» è la posizione dell'iterazione.
ng-bind="$index + 1"display a partire da 1.

Per ripetere X volte:
basta sostituire 7 da X .


Non è chiaro ciò che questa risposta fornisce che non è già coperto dalla risposta accettata o dai due voti più alti.
JamesT

Niente di più di quanto possa essere potente Angular.
funnyniko

3
Le risposte con due voti più alti sembrano presumere che «items» sia un array. Questo rende l'array in posizione.
funnyniko

Ben fatto, funziona. Questa è l'unica soluzione che risponde effettivamente alla domanda del PO. È incredibile che abbia solo pochi voti. Mi chiedo solo se esista una soluzione più elegante.
Healforgreen

3

Tutte le risposte qui sembrano presumere che gli elementi siano un array. Tuttavia, in AngularJS, potrebbe anche essere un oggetto. In tal caso, né il filtraggio con limitTo né array.slice funzionerà. Come una possibile soluzione, puoi convertire il tuo oggetto in un array, se non ti dispiace perdere le chiavi dell'oggetto. Ecco un esempio di un filtro per fare proprio questo:

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;
        }

    };
});

Una volta che è un array, usa slice o limitTo, come indicato in altre risposte.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.