Tabella AngularJS: ordinamento con orderBy e filtro maiuscole/minuscole

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

In AngularJS, l'ordinamento, la formattazione del testo e la gestione delle tabelle si basano sulla direttiva ng-repeat e su un'espressione di filtro. Questa pagina mostra come orderBy, uppercase, filter e $index trasformano una semplice tabella HTML in una griglia interattiva basata sui dati.

  • 🧱 struttura: I tag table, tr, td e th costituiscono comunque la griglia, quindi nessun markup specifico di AngularJS sostituisce l'HTML standard.
  • 🔁 Popolazione: La direttiva ng-repeat scorre un array sull'oggetto scope ed emette una riga per ogni elemento che trova.
  • ️ Ordinamento: Il filtro orderBy ordina le righe in base a una qualsiasi chiave, e un flag reverse inverte la direzione su richiesta.
  • 🔤 Formattazione: Il filtro per le maiuscole converte in maiuscolo una singola colonna senza alterare i dati sottostanti nel controller.
  • 🔎 Ricerca: Il filtro associato a un input ng-model restringe le righe visibili man mano che l'utente digita.
  • 🔢 Numerazione: La proprietà $index fornisce un contatore basato su zero, quindi aggiungendo uno si ottiene un numero di riga leggibile.
  • 🚀 Scala: Oltre mille righe, associa limitTo con paginazione e track per mantenere la pagina reattiva.
Scopri di più

Tabella AngularJS

Le tabelle sono uno degli elementi comuni utilizzati in HTML quando si lavora con le pagine web.

Tavoli dentro HTML sono progettati utilizzando il tag HTML

  1. tag – Questo è il tag principale utilizzato per visualizzare la tabella.
  2. – Questo tag viene utilizzato per separare le righe all'interno della tabella.
  3. – Questo tag viene utilizzato per visualizzare i dati effettivi della tabella.
  4. – Viene utilizzato per i dati dell'intestazione della tabella.

Utilizzando i tag HTML disponibili sopra insieme a AngularJS, possiamo semplificare il popolamento dei dati della tabella. In breve, la direttiva ng-repeat viene utilizzata per compilare i dati della tabella.

In questo capitolo vedremo come raggiungere questo obiettivo. Vedremo anche come utilizzare i filtri `orderBy` e `uppercase` insieme all'attributo `$index` per visualizzare gli indici delle tabelle AngularJS. Il primo passo è il markup stesso.

Compila e visualizza i dati in una tabella

Come abbiamo discusso nell'introduzione a 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.
Vediamo un semplice esempio di come implementare le tabelle in AngularJS.
In questo esempio,

Creeremo una tabella AngularJS che conterrà gli argomenti del corso insieme alle relative descrizioni.

Passo 1) Per prima cosa aggiungeremo un tag "style" alla nostra pagina HTML in modo che la tabella possa essere visualizzata come una tabella vera e propria.

Compila e visualizza i dati in una tabella

  1. Il tag style viene aggiunto alla pagina HTML. Questo è il modo standard per aggiungere eventuali attributi di formattazione richiesti per gli elementi HTML.
  2. Stiamo aggiungendo due valori di stile alla nostra tabella.
  • Uno è che dovrebbe esserci un bordo solido per la nostra tabella AngularJS e
  • In secondo luogo, è necessario aggiungere del padding ai dati della nostra tabella AngularJS.

Passo 2) Il passaggio successivo è scrivere il codice per generare la tabella e i suoi dati.

Compila e visualizza i dati in una tabella

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

⚠️ Attenzione: Questo elenco è riprodotto esattamente come pubblicato, e quattro righe al suo interno presentano degli errori. chrset errori di ortografia charsetVengono caricate tre build di AngularJS contemporaneamente, il che è già troppo. lib/bootstrap.js and lib/bootstrap.css non esistono. Continua angular.min.js solo.

Code Spiegazione

  1. Per prima cosa creiamo una variabile chiamata "tutorial" e le assegniamo alcune coppie chiave-valore in un unico passaggio. Ciascuna 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.
  2. Questo è il primo passo nella creazione di una tabella e utilizziamo il file etichetta.
  3. Per ogni riga di dati, utilizziamo la “direttiva ng-repeat”. Questa direttiva attraversa ciascuna coppia chiave-valore nell'oggetto ambito del tutorial utilizzando la variabile ptutor.
  4. Infine, stiamo utilizzando il file insieme alle coppie chiave-valore (ptutor.Name e ptutor.Description) per visualizzare i dati della tabella AngularJS.

Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Uscita

Compila e visualizza i dati in una tabella

Dall'output sopra,

  • Possiamo vedere che la tabella viene visualizzata correttamente con i dati dell'array di coppie chiave-valore definite nel controller.
  • I dati della tabella sono stati generati esaminando ciascuna delle coppie chiave-valore utilizzando la "direttiva ng-repeat".

Le righe grezze sono solo il punto di partenza, perché i filtri decidono come vengono ordinate e formattate.

Filtro integrato in AngularJS

È molto comune utilizzare i filtri integrati 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 breve riepilogo dei filtri prima di procedere avanti.

In AngularJS, i filtri vengono utilizzati per formattare il valore di un'espressione prima che venga visualizzato all'utente. Un esempio di filtro è il filtro 'uppercase', che prende in input una stringa e la formatta visualizzando tutti i caratteri in maiuscolo.

Pertanto, nell'esempio seguente, se il valore della variabile "TutorialName" è "AngularJS", l'output dell'espressione seguente sarà "ANGULARJS".

{{ TutorialName | uppercase }}

In questa sezione esamineremo in modo più dettagliato come i filtri orderBy e uppercase possono essere utilizzati nelle tabelle.

Filtri AngularJS comuni utilizzati con le tabelle

La tabella seguente confronta i filtri più frequentemente utilizzati all'interno di un'espressione ng-repeat.

Filtra Missione Esempio
ordinato da Ordina le righe in base a una chiave | orderBy : 'Name'
filtro Mantiene le righe corrispondenti | filter : searchText
lettere maiuscole Testo in maiuscolo | uppercase
minuscolo Testo in basso | lowercase
limitare numero di righe delle maiuscole | limitTo : 25
valuta Formati di denaro | currency : '$'
quando Formati date | date : 'dd MMM yyyy'
numero Imposta i decimali | number : 2

L'ordinamento è il filtro che i lettori richiedono per primo, quindi il filtro orderBy viene subito dopo.

Ordina tabella con filtro OrderBy

Questo filtro viene utilizzato per ordinare la tabella in base a una delle colonne della tabella. Nell'esempio precedente, l'output per i dati della nostra tabella AngularJS appariva come mostrato di seguito.

Controller Controllori in azione
Modelli Modelli e dati vincolanti
direttive Flessibilità delle direttive

Vediamo un esempio di come utilizzare il filtro "orderBy" per ordinare i dati di una tabella AngularJS in base alla prima colonna.

Ordina tabella con filtro OrderBy

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Spiegazione

  1. Stiamo utilizzando lo stesso codice che abbiamo utilizzato per creare la nostra tabella, l'unica differenza questa volta è che stiamo utilizzando il filtro "orderBy" insieme alla direttiva ng-repeat. In questo caso stiamo dicendo che vogliamo ordinare la tabella in base alla chiave “Nome”.

Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Uscita

Ordina tabella con filtro OrderBy

Dall'uscita,

  • Possiamo vedere che i dati nella tabella AngularJS sono stati ordinati in base ai dati nella prima colonna. L'array è dichiarato nell'ordine Controllers, Models, Directives, quindi senza un filtro le righe appaiono in quell'ordine. Applicando orderBy : 'Name' ordina i valori del nome in ordine alfabetico, spostando le direttive prima dei modelli e producendo Controller, Direttive, Modelli.

Ordina Reverse e dalle intestazioni di colonna

Il filtro orderBy accetta un secondo argomento. Passando true inverte la direzione e la memorizzazione sia della chiave che di quel flag nell'ambito consente a un lettore di riordinare la tabella facendo clic su un'intestazione, come ordinaPer riferimento descrive.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

L'ordinamento modifica la sequenza delle righe. Il filtro successivo modifica la visualizzazione di una singola colonna.

ARTICOLI CORRELATI

Tabella di visualizzazione con filtro maiuscolo

Possiamo anche utilizzare il filtro uppercase per convertire i dati nella tabella AngularJS in maiuscolo.

Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.

Tabella di visualizzazione con filtro maiuscolo

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Spiegazione

  1. Stiamo utilizzando lo stesso codice che abbiamo utilizzato per creare la nostra tabella, l'unica differenza questa volta è che stiamo utilizzando il filtro maiuscolo. Stiamo utilizzando 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, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Uscita

Tabella di visualizzazione con filtro maiuscolo

Dall'uscita,

  • Possiamo vedere che utilizzando il filtro “maiuscolo”, tutti i dati nella prima colonna vengono visualizzati con caratteri maiuscoli.

Formattare una colonna è utile e spesso i lettori desiderano visualizzare il numero di riga accanto ad essa.

Visualizza l'indice della tabella ($index)

Per visualizzare l'indice della tabella, aggiungere a con $indice.

Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.

Visualizza l'indice della tabella

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Spiegazione

  1. Stiamo utilizzando lo stesso codice che abbiamo utilizzato per creare la nostra tabella, l'unica differenza questa volta è che stiamo aggiungendo una riga in più alla nostra tabella per visualizzare la colonna indice. In questa colonna aggiuntiva, stiamo utilizzando la proprietà "$index" fornito da AngularJS e quindi utilizzando l'operatore +1 per incrementare l'indice per ogni riga.

Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Uscita

Visualizza l'indice della tabella

Dall'uscita,

  • Puoi vedere che è stata creata una colonna aggiuntiva. In questa colonna possiamo vedere gli indici creati per ogni riga.

Su una schermata possono stare tre righe. Un set di dati realistico non lo permette, quindi i lettori hanno bisogno di un modo per effettuare ricerche al suo interno.

Come filtrare e cercare i dati delle tabelle AngularJS

AngularJS include un filtro denominato filterPosizionato dopo ng-repeat, confronta ogni elemento dell'array con un valore e mantiene solo le righe corrispondenti. Associando tale valore a una casella di testo con ng-model, la tabella si restringe automaticamente man mano che l'utente digita, senza bisogno di gestori di eventi o codice del controller.

Aggiungi una ricerca in tempo reale Box

Aggiungi un input sopra la tabella e fai passare l'array attraverso il filtro. I due condividono la stessa proprietà scope, quindi AngularJS rivaluta l'espressione a ogni pressione di un tasto.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Spiegazione:

  1. L'input scrive tutto ciò che viene digitato searchText sull'oscilloscopio.
  2. filter : searchText mantiene le righe il cui nome o Descriptione contiene quella sottostringa, ignorando la distinzione tra maiuscole e minuscole.
  3. Per cercare in una singola colonna, invece, passa un oggetto: filter : {Name : searchText}.
  4. Catena di filtri, quindi | filter : searchText | orderBy : 'Name' Prima effettua le ricerche e poi seleziona i sopravvissuti.

Mantieni le tabelle di grandi dimensioni reattive

Un problema comune riscontrato durante lo sviluppo con le tabelle AngularJS è un dataset di grandi dimensioni contenente mille righe o più. ng-ripetere La direttiva crea uno scope e un watcher per riga, in modo che la pagina possa smettere di rispondere. Distribuisci invece le righe su più pagine e aggiungi track by Pertanto, le righe esistenti vengono riutilizzate anziché ricostruite.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

DOMANDE FREQUENTI

ng-repeat necessita di una chiave univoca per ogni riga. Due valori identici generano l'errore duplicati. Aggiungi una proprietà distinta o scrivi track per $index in modo che la posizione della riga diventi la chiave invece del suo valore.

Sì. Passa un array di chiavi, come orderBy: ['Name','Description']. AngularJS ordina in base alla prima chiave, poi risolve i casi di parità con la seconda. Anteponendo un segno meno a una chiave, si inverte solo quella chiave.

Ogni riga ng-repeat espone i valori booleani $even e $odd. Associandone uno a ng-class o ng-if è possibile applicare un colore di sfondo, ottenendo righe a strisce senza bisogno di alcun selettore CSS aggiuntivo sulla tabella.

Assistenti come Copilota GitHub generano rapidamente il markup ng-repeat, ma inventano ancora percorsi di script e scrivono male gli attributi. Verifica ogni suggerimento rispetto a Riferimento al filtro AngularJS prima della naveping.

Gli strumenti di IA riscrivono ng-repeat come un blocco di flusso di controllo e spostano i filtri in pipe o segnali. Perché Angular Non dispone di una funzione di ordinamento o di un filtro integrati; è necessario rivedere manualmente ogni ordinamento e ricerca generati.

Riassumi questo post con: