AngularJS - Gestione di elementi ripetuti

Una parte fondamentale delle applicazioni web è il esempio di elencoQuesto sarà sempre importante ogni volta che lavoriamo con i database, poiché dobbiamo mostrare gli articoli archiviati, così come, ad esempio, se gestiamo un negozio online, dobbiamo mostrare un elenco di prodotti.
Quello che dobbiamo capire è che sebbene i record siano diversi, gli elementi in quanto tali vengono ripetuti, poiché sono probabilmente righe di una tabella o di un elenco ordinato, qualunque sia la differenza di contenuto non rappresenta una differenza di struttura.
AngularJS non complica le nostre vite, semplicemente se vogliamo usare o fare una lista dobbiamo usare ng-repeat che crea un elemento per ogni elemento contenuto in un elenco, con questo possiamo passare un elenco di prodotti e generare facilmente una tabella.
Diciamo che stiamo facendo un elenco di studenti per una scuola, la chiave è generare l'elenco, normalmente lo otterremmo da alcuni servizio web che consulta un database ma per semplificare faremo un elenco noi stessi, quindi chiamiamo questo elenco all'interno del nostro $ ambito essere in grado di usarlo, con esso all'interno del HTML possiamo incorporare l'istruzione ng-repeat che avevamo menzionato, vediamo il seguente codice:

 var studenti = [{nome: 'María Rojo', id: '1'}, {nome: 'Manolo Rodriguez', id: '2'}, {nome: 'Joao Pinto', id: '3'}]; funzione StudentListController ($ scope) {$ scope.students = studenti; } 

Qui abbiamo definito la lista degli studenti e poi definiamo il controller con cui passiamo detta lista al $ ambito del controllore, ora dobbiamo scrivere il codice HTML:

 
 
 {{nome dello studente}}

Qui vediamo che definiamo la nostra lista come un controller di AngularJS e con esso il $ ambito di detto titolare ci permette di accedere all'elenco degli studenti, quindi usiamo ng-repeat dicendoti che creerai uno studente per ogni elemento dell'elenco degli studenti e infine all'interno del

creiamo un'ancora che ci porta in un altro posto all'interno dell'applicazione. Vediamo la seguente immagine di come appare nel nostro browser:

Funzione di giunzione ()Un'altra cosa che possiamo fare è incorporare nuovi elementi nell'elenco, per questo abbiamo la funzione giunzione ()Se, ad esempio, lo incorporiamo in un pulsante che aggiunge nuovi studenti, vedremo automaticamente la modifica, grazie al fatto che AngularJS Ci dà quel tocco di freschezza in tempo reale del documento senza dover ricaricare la pagina.
Vediamo nel codice seguente come apparirebbe il controller per aggiungere uno studente:

 var studenti = [{nome: 'María Rojo', id: '1'}, {nome: 'Manolo Rodriguez', id: '2'}, {nome: 'Joao Pinto', id: '3'}]; funzione StudentListController ($ scope) {$ scope.students = studenti; $ scope.addNew = function () {$ scope.students.splice (1, 0, {nome: 'Joaquin Fernandez', id: '4'}); }; } 

Ora non ci resta che chiamare la nuova funzione nel nostro HTML, possiamo farlo nel seguente modo:

 {{nome dello studente}}

Inserire

Vediamo come appare nel nostro browser:

Vediamo come abbiamo aggiunto il nuovo studente alla lista, tuttavia ogni volta che clicchiamo sul pulsante aggiungiamo la stessa persona, questo perché non abbiamo fatto un codice dinamico, ma questo è un altro discorso, quello che dobbiamo evidenziare è che abbiamo dovuto aggiungere un a cui abbiamo posizionato il controller, in questo modo potremmo incorporare il nostro pulsante nel $ ambito.
Con questo finiamo questo tutorial, poiché vediamo la gestione di elementi ripetuti in AngularJS È abbastanza semplice e ci dà la possibilità di creare elenchi rapidamente come abbiamo potuto vedere negli esempi.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo