Tabella AngularJS: ordinamento, ordine per e filtro maiuscolo [Esempi]

By: James Hartmann James Hartmann
Hours aggiornato

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

  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.

Vedremo come raggiungere questo obiettivo nel corso di questo capitolo. Vedremo anche come utilizzare i filtri orderby e uppercase insieme all'utilizzo dell'attributo $index per visualizzare gli indici delle tabelle Angular.

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.
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 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 Angular e
  • Il secondo è che dovrebbe essere implementato il riempimento per i dati della nostra tabella Angular.

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>

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 Angular.

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".

ARTICOLI CORRELATI

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 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 accetta un output di stringa, formatta la stringa e visualizza tutti i caratteri nella stringa in maiuscolo.

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

{{ TurotialName | uppercase }}

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

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 Angular appariva come mostrato di seguito.

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

Diamo un'occhiata ad un esempio su come possiamo utilizzare il filtro "orderBy" e ordinare i dati della tabella Angular utilizzando la prima colonna della tabella.

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 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.

Tabella di visualizzazione con filtro maiuscolo

Possiamo anche utilizzare il filtro maiuscolo per modificare i dati nella tabella Angular 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.

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.

Sintesi

  • Le strutture delle tabelle vengono create utilizzando i tag standard disponibili all'interno 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 basata su 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 che contengono oltre 1000 righe di dati. A volte il ng-ripetere La direttiva può non rispondere e quindi a volte l'intera pagina non risponde. In tal caso, è sempre meglio avere un'impaginazione in cui le righe di dati sono distribuite su più pagine.

Riassumi questo post con: