Le tabelle sono uno degli elementi comuni utilizzati in HTML quando si lavora con le pagine web.
Le tabelle in HTML sono progettate utilizzando il tag HTML
Tag
- Questo è il tag principale utilizzato per visualizzare la tabella.
- Questo tag viene utilizzato per separare le righe all'interno della tabella.
- Questo tag viene utilizzato per visualizzare i dati effettivi della tabella.
: viene utilizzato per i dati dell'intestazione della tabella.
Utilizzando i tag HTML disponibili sopra insieme ad AngularJS, possiamo rendere più facile popolare i dati della tabella. In breve, la direttiva ng-repeat viene utilizzata per compilare i dati della tabella.
Vedremo come ottenere questo risultato durante questo capitolo. Vedremo anche come possiamo usare i filtri orderby e maiuscolo insieme all'uso dell'attributo $ index per visualizzare gli indici delle tabelle angolari.
In questo tutorial imparerai-
Popolare e visualizzare i dati in una tabella
Filtro integrato AngularJS
Ordina tabella con OrderBy Filter
Visualizza tabella con filtro maiuscolo
Visualizza l'indice della tabella ($ index)
Popolare e visualizzare i dati in una tabella
Come abbiamo discusso nell'introduzione di questo capitolo, la base per creare la struttura della tabella in una pagina HTML rimane la stessa.
La struttura della tabella viene comunque creata utilizzando i normali tag HTML di
,
,
e
. Tuttavia, i dati vengono popolati utilizzando la direttiva ng-repeat in AngularJS.
Diamo un'occhiata a un semplice esempio di come possiamo implementare le tabelle angolari.
In questo esempio,
Creeremo una tabella angolare che conterrà gli argomenti del corso insieme alle loro descrizioni.
Passaggio 1) Per prima cosa aggiungeremo un tag "style" alla nostra pagina HTML in modo che la tabella possa essere visualizzata come una tabella corretta.
Il tag di stile viene aggiunto alla pagina HTML. Questo è il modo standard per aggiungere qualsiasi attributo di formattazione richiesto per gli elementi HTML.
Stiamo aggiungendo due valori di stile alla nostra tabella.
Uno è che dovrebbe esserci un bordo solido per il nostro tavolo angolare e
Il secondo è che dovrebbe esserci un riempimento per i nostri dati della tabella angolare.
Passaggio 2) Il passaggio successivo consiste nello scrivere il codice per generare la tabella e i suoi dati.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Spiegazione del codice:
Per prima cosa creiamo una variabile chiamata "tutorial" e le assegniamo alcune coppie chiave-valore in un unico passaggio. Ogni coppia chiave-valore verrà utilizzata come dati durante la visualizzazione della tabella. La variabile tutorial viene quindi assegnata all'oggetto scope in modo che sia possibile accedervi dalla nostra vista.
Questo è il primo passaggio nella creazione di una tabella e utilizziamo il tag
.
Per ogni riga di dati, stiamo usando la "direttiva ng-repeat". Questa direttiva passa attraverso ogni coppia chiave-valore nell'oggetto tuto, ambito rial utilizzando la variabile ptutor.
Infine, stiamo usando il tag
insieme alle coppie chiave-valore (ptutor.Name e ptutor.Description) per visualizzare i dati della tabella angolare.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'output di cui sopra,
Possiamo vedere che la tabella viene visualizzata correttamente con i dati dalla matrice di coppie chiave-valore definita nel controller.
I dati della tabella sono stati generati passando attraverso ciascuna delle coppie chiave-valore utilizzando la "direttiva ng-repeat".
Filtro integrato AngularJS
È molto comune utilizzare i filtri incorporati in AngularJS per modificare il modo in cui i dati vengono visualizzati nelle tabelle. Abbiamo già visto i filtri in azione in un capitolo precedente. Facciamo un rapido riepilogo dei filtri prima di procedere.
In Angular.JS i filtri vengono utilizzati per formattare il valore dell'espressione prima che venga visualizzato all'utente. Un esempio di filtro è il filtro "maiuscolo" che assume un output di stringa e formatta la stringa e visualizza tutti i caratteri nella stringa come maiuscolo.
Quindi, nell'esempio seguente, se il valore della variabile "TutorialName" è "AngularJS", l'output dell'espressione seguente sarà "ANGULARJS".
{{TurotialName | maiuscolo }}
In questa sezione, esamineremo in modo più dettagliato come i filtri orderBy e maiuscolo possono essere utilizzati nelle tabelle.
Ordina tabella con OrderBy Filter
Questo filtro viene utilizzato per ordinare la tabella in base a una delle colonne della tabella. Nell'esempio precedente, l'output per i nostri dati della tabella angolare appariva come mostrato di seguito.
Controller
Controller in azione
Modelli
Modelli e dati vincolanti
Direttive
Flessibilità delle direttive
Vediamo un esempio, su come possiamo utilizzare il filtro "orderBy" e ordinare i dati della tabella angolare utilizzando la prima colonna della tabella.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Spiegazione del codice:
Stiamo usando lo stesso codice che abbiamo usato per creare la nostra tabella, l'unica differenza questa volta è che stiamo usando il filtro "orderBy" insieme alla direttiva ng-repeat. In questo caso, stiamo dicendo che vogliamo ordinare la tabella con la chiave "Nome".
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
Possiamo vedere che i dati nella tabella Angular sono stati ordinati secondo i dati nella prima colonna. Nel nostro set di dati, i dati "Direttive" provengono dai dati "Modelli", ma poiché abbiamo applicato il filtro orderBy, le tabelle vengono ordinate di conseguenza.
Visualizza tabella con filtro maiuscolo
Possiamo anche usare il filtro maiuscolo per cambiare i dati nella tabella angolare in maiuscolo.
Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Spiegazione del codice:
Stiamo usando lo stesso codice che abbiamo usato per creare la nostra tabella, l'unica differenza questa volta è che stiamo usando il filtro maiuscolo. Stiamo usando questo filtro insieme a "ptutor.Name" in modo che tutto il testo nella prima colonna venga visualizzato in maiuscolo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
Possiamo vedere che utilizzando il filtro "maiuscolo", tutti i dati nella prima colonna vengono visualizzati con caratteri maiuscoli.
Visualizza l'indice della tabella ($ index)
Per visualizzare l'indice della tabella, aggiungi un
con $ index.
Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Spiegazione del codice:
Stiamo usando lo stesso codice che abbiamo usato per creare la nostra tabella, l'unica differenza questa volta è che stiamo aggiungendo una riga in più alla nostra tabella per visualizzare la colonna dell'indice.
In questa colonna aggiuntiva, stiamo utilizzando la proprietà "$ index" fornita da AngularJS e quindi utilizzando l'operatore +1 per incrementare l'indice per ogni riga.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
Puoi vedere che è stata creata una colonna aggiuntiva. In questa colonna, possiamo vedere gli indici creati per ogni riga.
Sommario:
Le strutture delle tabelle vengono create utilizzando i tag standard disponibili in HTML. I dati nella tabella vengono popolati utilizzando la direttiva "ng-repeat".
Il filtro orderBy può essere utilizzato per ordinare la tabella in base a qualsiasi colonna all'interno della tabella.
Il filtro maiuscolo può essere utilizzato per visualizzare i dati in qualsiasi colonna di testo in maiuscolo.
La proprietà "$ index" può essere utilizzata per creare un indice per la tabella.
Un problema comune riscontrato durante lo sviluppo con le tabelle AngularJS.JS è l'implementazione di set di dati di grandi dimensioni con oltre 1000 righe di dati. A volte la direttiva ng-repeat può diventare non reattiva e quindi l'intera pagina a volte non risponde. In tal caso, è sempre meglio avere l'impaginazione in cui le righe di dati sono distribuite su più pagine.
