AngularJS-tabel: sortimine, järjestus ja suurtähtede filter [näited]

Autor: James Hartman James Hartman
Hours Ajakohastatud

Tabelid on üks levinumaid elemente, mida HTML-is veebilehtedega töötamisel kasutatakse.

HTML-i tabelid on kujundatud HTML-märgendi abil

  1. silt – see on tabeli kuvamiseks kasutatav põhimärgend.
  2. – Seda silti kasutatakse tabeli ridade eraldamiseks.
  3. – Seda silti kasutatakse tegelike tabeliandmete kuvamiseks.
  4. – Seda kasutatakse tabeli päise andmete jaoks.

Ülaltoodud saadaolevate HTML-märgendite kasutamine koos AngularJS, saame tabeliandmete täitmise lihtsamaks muuta. Lühidalt öeldes kasutatakse tabeliandmete täitmiseks ng-repeat direktiivi.

Selles peatükis vaatleme, kuidas seda saavutada. Vaatame ka, kuidas saame kasutada filtreid orderby ja suurtähtedega koos atribuudi $index kasutamisega Angular tabeli indeksite kuvamiseks.

Andmete sisestamine ja kuvamine tabelis

Nagu me selle peatüki sissejuhatuses rääkisime, jääb HTML-lehel tabelistruktuuri loomise alus samaks.

Tabeli struktuur luuakse endiselt tavaliste HTML-i siltide abil , , ja . Andmed täidetakse aga AngularJS-i ng-repeat direktiivi abil.
Vaatame lihtsat näidet, kuidas Angular tabeleid rakendada.
Selles näites

Loome nurgatabeli, milles on kursuste teemad koos nende kirjeldustega.

Step 1) Esmalt lisame oma HTML-lehele "stiili" märgendi, et tabelit saaks kuvada õige tabelina.

Andmete sisestamine ja kuvamine tabelis

  1. Stiilimärgend lisatakse HTML-lehele. See on tavaline viis HTML-i elementide jaoks vajalike vormindusatribuutide lisamiseks.
  2. Lisame oma tabelisse kaks stiiliväärtust.
  • Üks on see, et meie Angular laual peaks olema kindel piir ja
  • Teiseks tuleks meie Angular-tabeli andmete jaoks paigaldada polsterdus.

Step 2) Järgmine samm on tabeli ja selle andmete genereerimiseks koodi kirjutamine.

Andmete sisestamine ja kuvamine tabelis

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

Koodi selgitus

  1. Esmalt loome muutuja nimega "õpetus" ja määrame sellele ühes etapis mõned võtme-väärtuste paarid. Iga võtme-väärtuse paari kasutatakse tabeli kuvamisel andmetena. Seejärel määratakse õpetusmuutuja ulatuse objektile, nii et sellele pääseb juurde meie vaatest.
  2. See on esimene samm tabeli loomisel ja me kasutame tag.
  3. Iga andmerea jaoks kasutame ng-repeat direktiivi. See direktiiv läbib õpetuse ulatuse objekti iga võtme-väärtuse paari, kasutades muutujat ptutor.
  4. Lõpuks kasutame silt koos võtme-väärtuse paaridega (ptutor.Name ja ptutor.Descriptioon), et kuvada Angular tabeli andmed.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund

Andmete sisestamine ja kuvamine tabelis

Ülaltoodud väljundist

  • Näeme, et tabel kuvatakse õigesti kontrolleris määratletud võtme-väärtuste paaride massiivi andmetega.
  • Tabeliandmed genereeriti iga võtme-väärtuse paari läbimisel, kasutades ng-repeat direktiivi.

SEOTUD ARTIKLID

AngularJS sisseehitatud filter

Väga levinud on AngularJS-i sisseehitatud filtrite kasutamine andmete tabelites kuvamise muutmiseks. Oleme juba varasemas peatükis näinud filtreid töös. Teeme filtrite kiire kokkuvõtte, enne kui jätkame.

Angular.JS-is kasutatakse filtreid avaldise väärtuse vormindamiseks enne selle kuvamist kasutajale. Filtri näiteks on suurtähtedega filter, mis võtab stringi väljundi ja vormindab stringi ning kuvab kõik stringis olevad märgid suurtähtedena.

Seega, kui allolevas näites on muutuja 'TutorialName' väärtus 'AngularJS', on alloleva avaldise väljundiks 'ANGULARJS'.

{{ TurotialName | uppercase }}

Selles jaotises vaatleme üksikasjalikumalt, kuidas saab tabelites kasutada filtreid orderBy ja suurtähted.

Sorteeri tabel filtriga OrderBy

Seda filtrit kasutatakse tabeli sortimiseks ühe tabeli veeru alusel. Eelmises näites ilmus meie nurgatabeli andmete väljund nagu allpool näidatud.

Kontrollerid Kontrollerid tegevuses
Mudelid Mudelid ja sidumisandmed
Direktiivid Direktiivide paindlikkus

Vaatame näidet selle kohta, kuidas saame kasutada filtrit “orderBy” ja sorteerida Angular tabeli andmeid tabeli esimese veeru abil.

Sorteeri tabel filtriga 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>

Koodi selgitus

  1. Kasutame sama koodi nagu tabeli loomisel, ainus erinevus seekord on see, et kasutame filtrit "orderBy" koos ng-repeat direktiiviga. Sel juhul ütleme, et tahame laua tellida klahvi “Nimi” järgi.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund

Sorteeri tabel filtriga OrderBy

Väljundist,

  • Näeme, et nurgatabeli andmed on sorteeritud vastavalt esimeses veerus olevatele andmetele. Meie andmekogumis pärinevad „Direktiivide” andmed andmetest „Models”, kuid kuna rakendasime filtri orderBy, sorteeritakse tabelid vastavalt.

Kuvatabel suurtähtede filtriga

Samuti saame kasutada suurtähtede filtrit, et muuta Angular tabeli andmed suurtähtedeks.

Vaatame näidet selle kohta, kuidas seda saavutada.

Kuvatabel suurtähtede filtriga

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

Koodi selgitus

  1. Kasutame sama koodi nagu tabeli loomisel, ainus erinevus seekord on see, et kasutame suurtähtedega filtrit. Me kasutame seda filtrit koos "ptutor.Name"-ga, nii et kogu esimeses veerus olev tekst kuvatakse suurtähtedega.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund

Kuvatabel suurtähtede filtriga

Väljundist,

  • Näeme, et kasutades filtrit "suurtähed", kuvatakse kõik esimeses veerus olevad andmed suurtähtedega.

Kuva tabeli indeks ($index)

Tabeliindeksi kuvamiseks lisage a $indeksiga.

Vaatame näidet selle kohta, kuidas seda saavutada.

Kuvage tabeli indeks

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

Koodi selgitus

  1. Kasutame sama koodi nagu tabeli loomisel, ainsaks erinevuseks on seekord see, et lisame tabelisse täiendava rea ​​indeksi veeru kuvamiseks. Selles täiendavas veerus kasutame atribuuti "$index". pakub AngularJS ja seejärel operaatori +1 abil iga rea ​​indeksi suurendamiseks.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund

Kuvage tabeli indeks

Väljundist,

  • Näete, et on loodud täiendav veerg. Selles veerus näeme iga rea ​​jaoks loodud indekseid.

kokkuvõte

  • Tabelistruktuurid luuakse sees saadaolevate standardmärgendite abil HTML. Tabeli andmed täidetakse ng-repeat direktiivi abil.
  • Filtrit orderBy saab kasutada tabeli sortimiseks tabeli mis tahes veeru alusel.
  • Suurtähtedega filtrit saab kasutada mis tahes tekstipõhise veeru andmete kuvamiseks suurtähtedega.
  • Atribuuti „$index” saab kasutada tabeli indeksi loomiseks.
  • Üks levinud probleem AngularJS.JS tabelite arendamise käigus on suurte andmehulkade rakendamine, millel on üle 1000 andmerida. Mõnikord ng-korda käsk võib muutuda mittereageerivaks ja seetõttu ei reageeri mõnikord kogu leht. Sellisel juhul on alati parem kasutada lehekülgedega lehekülge, kus andmeread on jaotatud mitmele lehele.