AngularJS tabel: sortimine orderBy ja suurtähtede filtri abil

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i tabelite sortimine, järjestamine ja teksti vormindamine tuginevad kõik ng-repeat direktiivile ja filtriavaldisele. See leht näitab, kuidas orderBy, uppercase, filter ja $index muudavad tavalise HTML-tabeli reaalajas andmepõhiseks ruudustikuks.

  • 🧱 Struktuur: Sildid table, tr, td ja th moodustavad endiselt ruudustiku, seega ükski AngularJS-i spetsiifiline märgistus ei asenda standardset HTML-i.
  • 🔁 Rahvaarv: ng-repeat direktiiv käib läbi ulatusobjekti massiivi ja väljastab iga leitud elemendi kohta ühe rea.
  • ↕️ Järjestus: Filter orderBy sorteerib ridu suvalise võtme järgi ja vastupidine lipp muudab nõudmisel suunda.
  • 🔤 Vormindamine: Suurtähtede filter muudab ühe veeru suurtähtedeks, muutmata kontrolleris olevaid alusandmeid.
  • 🔎 Otsimine: ng-mudeli sisendiga seotud filter kitsendab lugeja tippimise ajal nähtavaid ridu.
  • 🔢 Numeratsioon: Omadus $index annab nullil põhineva loenduri, seega ühe lisamine annab loetava reanumbri.
  • 🚀 Skaala: Tuhande rea järel paaristage limitTo leheküljenumbriga ja track poolt, et leht oleks responsiivne.
Loe rohkem

AngularJS tabel

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

Tabelid HTML on loodud HTML-sildi 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 vaatame, kuidas seda saavutada. Samuti vaatame, kuidas kasutada orderBy ja suurtähtede filtreid koos $index atribuudiga AngularJS tabeli indeksite kuvamiseks. Esimene samm on märgistus ise.

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 AngularJS tabeleid rakendada.
Selles näites

Me loome AngularJS tabeli, mis sisaldab kursuste teemasid koos 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 AngularJS tabelil peaks olema pidev ääris ja
  • Teiseks peaks meie AngularJS tabeli andmete jaoks olema paigas täidis.

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>

⚠️ Hoiatus: See nimekiri on reprodutseeritud täpselt avaldatul kujul ja neli rida selles on vigased. chrset kirjavead charsetKorraga laetakse kolm AngularJS-i järku, mis on üks liiga palju. lib/bootstrap.js ja lib/bootstrap.css ei eksisteeri. Hoidke angular.min.js ainult.

Code 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.Description), et kuvada AngularJS tabeli andmeid.

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.

Töötlemata read on ainult alguspunkt, sest filtrid otsustavad, kuidas neid ridu järjestatakse ja vormindatakse.

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.

AngularJS-is kasutatakse filtreid avaldise väärtuse vormindamiseks enne selle kasutajale kuvamist. Filtri näide on „suurtähtede” filter, mis võtab stringi väljundi vastu ja vormindab stringi ning kuvab kõik stringi märgid suurtähtedena.

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

{{ TutorialName | uppercase }}

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

Levinud AngularJS filtrid, mida kasutatakse tabelitega

Allolev tabel võrdleb ng-repeat avaldise sees kõige sagedamini kasutatavaid filtreid.

filtrid Eesmärk Näide
tellimisjärg Sorteerib ridu võtme järgi | orderBy : 'Name'
filtreerida Säilitab kattuvaid ridu | filter : searchText
suured Suurtähtedega tekst | uppercase
väiketähti Langetab teksti | lowercase
piirangKuni Rea arv Capsis | limitTo : 25
raha Vormindab raha | currency : '$'
andmed Vormindab kuupäevi | date : 'dd MMM yyyy'
number Määrab kümnendmurrud | number : 2

Sorteerimine on filter, mida lugejad esimesena küsivad, seega tuleb järgmisena filter orderBy.

Sorteeri tabel filtriga OrderBy

Seda filtrit kasutatakse tabeli sortimiseks ühe tabeli veeru alusel. Eelmises näites nägi meie AngularJS-i tabeli andmete väljund välja allpool näidatud viisil.

Kontrollerid Kontrollerid tegevuses
Mudelid Mudelid ja sidumisandmed
Direktiivid Direktiivide paindlikkus

Vaatame näidet, kuidas kasutada filtrit „orderBy” ja sortida AngularJS tabeli andmeid tabeli esimese veeru järgi.

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>

Code 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 AngularJS tabeli andmed on sorteeritud esimese veeru andmete järgi. Massiiv on deklareeritud järjekorras Controllers, Models, Directives, seega ilma filtrita kuvatakse read selles järjekorras. Rakendamine orderBy : 'Name' järjestab nime väärtused tähestikulises järjekorras, mis liigutab direktiivid mudelitest ettepoole ja annab tulemuseks kontrollerid, direktiivid ja mudelid.

Sordi sisse Reverse ja veeru „Saatja” päised

Filter orderBy aktsepteerib teist argumenti. true pöörab suuna ümber ja nii võtme kui ka selle lipu salvestamine ulatusse võimaldab lugejal tabelit päisele klõpsates ümber sortida, kuna Viitenumber kirjeldab.

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

Järjestus muudab ridade järjestust. Järgmine filter muudab ühe veeru lugemise viisi.

SEOTUD ARTIKLID

Kuvatabel suurtähtede filtriga

Suurtähtede filtrit saab kasutada ka AngularJS tabeli andmete suurtähtedeks muutmiseks.

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>

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

Veeru vormindamine on kasulik ja lugejad soovivad sageli selle kõrvale rea numbrit.

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>

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

Kolm rida mahub ühele ekraanile. Realistlik andmestik mitte, seega peavad lugejad saama seda otsida.

Kuidas AngularJS tabeli andmeid filtreerida ja otsida

AngularJS pakub filtrit nimega filter. Asetatuna pärast ng-repeat'i, võrdleb see massiivi iga elementi mingi väärtusega ja säilitab ainult sobivad read. Seo see väärtus tekstikastiga ng-model abil ja tabel kitsendab ennast lugeja trükkimise ajal, ilma sündmusekäitleja ja kontrolleri koodita.

Lisa reaalajas otsing Box

Lisa tabeli kohale üks sisend ja suuna massiiv läbi filtri. Neil kahel on sama ulatuse omadus, seega hindab AngularJS avaldist iga klahvivajutuse korral uuesti.

<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 Selgitus:

  1. Sisend kirjutab kõik, mis sisestatakse. searchText ulatuse kohta.
  2. filter : searchText hoiab ridu, mille nimi või Descriptioon sisaldab seda alamstringi, ignoreerides suur- ja väiketähti.
  3. Ühe veeru otsimiseks edastage objekt: filter : {Name : searchText}.
  4. Filtrite kett, seega | filter : searchText | orderBy : 'Name' otsib esmalt läbi ja seejärel sorteerib ellujäänud.

Hoidke suured tabelid reageerimisvõimelised

Üks levinud probleem, millega AngularJS-i tabelite arendamisel kokku puututakse, on suur andmestik, mis sisaldab tuhat või enam rida. ng-korda direktiiv loob ulatuse ja vaatleja rea ​​kohta, nii et leht võib reageerimise lõpetada. Jaota read lehtede vahel ja lisa track by seega olemasolevaid ridu taaskasutatakse, mitte ei ehitata uuesti üles.

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

KKK

ng-repeat vajab iga rea ​​jaoks unikaalset võtit. Kaks identset väärtust tekitavad duplikaatvea. Lisa erinev omadus või kirjuta track väärtusega $index, nii et rea positsioonist saab võtme, mitte väärtusest.

Jah. Edastage võtmete massiiv, näiteks orderBy : ['Name','Description']. AngularJS sorteerib esimese võtme järgi ja seejärel katkestab seose teisega. Lisage võtme ette miinusmärk, et see võti eraldi ümber pöörata.

Iga ng-repeat rida näitab tõeväärtusi $even ja $odd. Seo üks neist ng-class või ng-if funktsiooniga, et rakendada taustavärvi, mis loob triibulised read ilma täiendava CSS-selektorita tabelis.

Assistendid, näiteks GitHubi koopia tellingute ng-repeat märgistust kiiresti, kuid nad ikka leiutavad skriptiteede ja valesti kirjutatud atribuute. Kontrollige iga soovitust AngularJS filtri viide enne laevaping.

Tehisintellekti tööriistad kirjutavad ng-repeat'i ümber juhtimisvoo plokkina ja liigutavad filtrid torudesse või signaalidesse. Sest nurgeline Puudub sisseehitatud orderBy funktsioon või filtritoru, vaadake üle iga genereeritud sortimine ja otsige käsitsi.

Võta see postitus kokku järgmiselt: