AngularJS-taulukko: Lajittele orderBy- ja isojen kirjainten suodattimen avulla

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS-taulukoiden lajittelu, järjestys ja tekstin muotoilu perustuvat kaikki ng-repeat-direktiiviin ja filter-lausekkeeseen. Tämä sivu näyttää, kuinka orderBy, uppercase, filter ja $index muuttavat tavallisen HTML-taulukon reaaliaikaiseksi, datapohjaiseksi ruudukoksi.

  • 🧱 Rakenne: Tagit table, tr, td ja th muodostavat edelleen ruudukon, joten mikään AngularJS:n oma merkintä ei korvaa tavallista HTML:ää.
  • 🔁 Väestö: ng-repeat-direktiivi käy läpi taulukon scope-objektin perusteella ja tuottaa yhden rivin jokaista löytämäänsä kohdetta kohden.
  • ↕️ Järjestys: orderBy-suodatin lajittelee rivit minkä tahansa avaimen mukaan, ja käänteinen lippu kääntää suunnan tarvittaessa.
  • 🔤 Muotoilu: Isojen kirjainten suodatin muuttaa yhden sarakkeen isoksi muuttamatta ohjaimen pohjana olevia tietoja.
  • 🔎 Haetaan: ng-mallin syötteeseen sidottu suodatin kaventaa näkyviä rivejä lukijan kirjoittaessa.
  • 🔢 numerointi: $index-ominaisuus tarjoaa nollapohjaisen laskurin, joten yhden lisääminen tuottaa luettavaan rivinumeroon.
  • 🚀 asteikko: Tuhannen rivin jälkeen parita limitTo sivutuksen kanssa ja track pitääksesi sivun responsiivisena.
Lue lisää

AngularJS pöytä

Taulukot ovat yksi yleisimmistä HTML-elementeistä, joita käytetään web-sivujen kanssa työskentelyssä.

Pöydät HTML on suunniteltu HTML-tagin avulla

  1. tag – Tämä on päätunniste, jota käytetään taulukon näyttämiseen.
  2. – Tätä tunnistetta käytetään taulukon rivien erottamiseen.
  3. – Tätä tunnistetta käytetään todellisten taulukkotietojen näyttämiseen.
  4. – Tätä käytetään taulukon otsikkotietoihin.

Käyttämällä yllä olevia saatavilla olevia HTML-tageja yhdessä angularjs, voimme helpottaa taulukkotietojen täyttämistä. Lyhyesti sanottuna ng-repeat-direktiiviä käytetään taulukkotietojen täyttämiseen.

Tässä luvussa tarkastelemme, miten tämä saavutetaan. Tarkastelemme myös, miten voimme käyttää orderBy- ja isot kirjaimet -suodattimia sekä $index-attribuuttia AngularJS-taulukkoindeksien näyttämiseen. Ensimmäinen vaihe on itse merkintä.

Täytä ja näytä tiedot taulukossa

Kuten tämän luvun johdannossa totesimme, perusta taulukkorakenteen luomiselle HTML-sivulla pysyy samana.

Taulukon rakenne luodaan edelleen käyttämällä tavallisia HTML-tageja , , ja . Tiedot täytetään kuitenkin käyttämällä ng-repeat -direktiiviä AngularJS:ssä.
Katsotaanpa yksinkertaista esimerkkiä AngularJS-taulukoiden toteuttamisesta.
Tässä esimerkissä

Aiomme luoda AngularJS-taulukon, joka sisältää kurssien aiheet kuvauksineen.

Vaihe 1) Ensin aiomme lisätä "style" -tunnisteen HTML-sivullemme, jotta taulukko voidaan näyttää oikeana taulukkona.

Täytä ja näytä tiedot taulukossa

  1. Tyylitunniste lisätään HTML-sivulle. Tämä on tavallinen tapa lisätä kaikki HTML-elementeille vaadittavat muotoiluattribuutit.
  2. Lisäämme taulukkoomme kaksi tyyliarvoa.
  • Yksi on se, että AngularJS-taulukollamme tulisi olla kiinteä reuna ja
  • Toiseksi, AngularJS-taulukkodatalle tulisi lisätä täyttö.

Vaihe 2) Seuraava askel on kirjoittaa koodi taulukon ja sen tietojen luomiseksi.

Täytä ja näytä tiedot taulukossa

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

⚠️ Varoitus: Tämä listaus on toistettu täsmälleen sellaisena kuin se on julkaistu, ja siinä on neljä virheellistä riviä. chrset kirjoitusvirheet charsetKolme AngularJS-koontia latautuu kerralla, mikä on yksi liikaa. lib/bootstrap.js ja lib/bootstrap.css ei ole olemassa. Säilytä angular.min.js vain.

Code Selitys

  1. Luomme ensin muuttujan nimeltä "tutorial" ja määritämme sille avainarvopareja yhdessä vaiheessa. Kutakin avain-arvo-paria käytetään datana taulukkoa näytettäessä. Opetusmuuttuja määrätään sitten laajuusobjektille, jotta sitä voidaan käyttää näkymästämme.
  2. Tämä on ensimmäinen vaihe taulukon luomisessa, ja käytämme tag.
  3. Käytämme jokaiselle tietoriville "ng-repeat-direktiiviä". Tämä ohje käy läpi jokaisen opetusohjelman laajuusobjektin avainarvoparin käyttämällä muuttujaa ptutor.
  4. Lopuksi käytämme -tunniste sekä avain-arvo-parit (ptutor.Name ja ptutor.Description) AngularJS-taulukkotietojen näyttämiseksi.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

ulostulo

Täytä ja näytä tiedot taulukossa

Yllä olevasta lähdöstä

  • Näemme, että taulukko näytetään oikein ohjaimessa määritellyn avainarvoparien taulukon tiedoilla.
  • Taulukkotiedot luotiin käymällä läpi jokainen avainarvopari käyttämällä "ng-repeat-direktiiviä".

Raakarivit ovat vain lähtökohta, koska suodattimet päättävät, miten rivit järjestetään ja muotoillaan.

Sisäänrakennettu AngularJS-suodatin

On hyvin yleistä käyttää AngularJS:n sisäänrakennettuja suodattimia tietojen esitystavan muuttamiseen taulukoissa. Olemme jo nähneet suodattimia toiminnassa aiemmassa luvussa. Tehdään nopea yhteenveto suodattimista ennen kuin jatkamme eteenpäin.

AngularJS:ssä suodattimia käytetään lausekkeen arvon muotoiluun ennen kuin se näytetään käyttäjälle. Esimerkki suodattimesta on 'uppercase'-suodatin, joka ottaa merkkijonotulosteen ja muotoilee merkkijonon näyttäen kaikki merkkijonon merkit isoina kirjaimina.

Joten alla olevassa esimerkissä muuttujan 'TutorialName' arvo on 'AngularJS', alla olevan lausekkeen tulos on 'ANGULARJS'.

{{ TutorialName | uppercase }}

Tässä osiossa tarkastellaan tarkemmin, kuinka orderBy- ja isokirjaimia suodattimia voidaan käyttää taulukoissa.

Yleisiä taulukoiden kanssa käytettyjä AngularJS-suodattimia

Alla oleva taulukko vertailee ng-toistolausekkeen sisällä useimmin käytettyjä suodattimia.

Suodattaa Tarkoitus esimerkki
tilausBy Lajittelee rivit avaimen mukaan | orderBy : 'Name'
suodattaa Säilyttää vastaavat rivit | filter : searchText
isoja Teksti alkaa isolla | uppercase
pieniä Madantaa tekstiä | lowercase
raja Caps-rivien määrä | limitTo : 25
valuutta Muotoilee rahaa | currency : '$'
data Muotoilee päivämäärät | date : 'dd MMM yyyy'
numero Asettaa desimaaliluvut | number : 2

Lajittelu on suodatin, jota lukijat kysyvät ensin, joten orderBy-suodatin tulee seuraavana.

Lajittele taulukko Järjestyksen mukaan -suodattimella

Tätä suodatinta käytetään taulukon lajittelemiseen jonkin taulukon sarakkeen perusteella. Edellisessä esimerkissä AngularJS-taulukkodatamme tuloste näytti alla olevan kaltaiselta.

ohjaimet Ohjaimet toiminnassa
Mallit Mallit ja sitovat tiedot
ohjeet Direktiivien joustavuus

Katsotaanpa esimerkkiä siitä, miten voimme käyttää "orderBy"-suodatinta ja lajitella AngularJS-taulukon tiedot taulukon ensimmäisen sarakkeen perusteella.

Lajittele taulukko Järjestyksen mukaan -suodattimella

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

  1. Käytämme samaa koodia kuin taulukon luomiseen, ainoa ero tällä kertaa on, että käytämme "orderBy"-suodatinta yhdessä ng-repeat-direktiivin kanssa. Tässä tapauksessa sanomme, että haluamme tilata pöydän avaimella "Nimi".

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

ulostulo

Lajittele taulukko Järjestyksen mukaan -suodattimella

Ulostulosta,

  • Näemme, että AngularJS-taulukon tiedot on lajiteltu ensimmäisen sarakkeen tietojen mukaan. Taulukko on määritelty järjestyksessä Controllers (Ohjaimet), Models (Mallit), Directives (Direktiivit), joten ilman suodatinta rivit näkyvät tässä järjestyksessä. orderBy : 'Name' järjestää Nimi-arvot aakkosjärjestykseen, jolloin direktiivit siirtyvät mallien edelle ja tuottaa ohjaimet, direktiivit ja mallit.

Lajittele Reverse ja Lähettäjä-sarakkeen otsikot

orderBy-suodatin hyväksyy toisen argumentin. true kääntää suunnan, ja tallentamalla sekä avaimen että kyseisen lipun laajuusalueelle lukija voi lajitella taulukon uudelleen napsauttamalla otsikkoa, kuten tilausViitteellä kuvailee.

<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ärjestys muuttaa rivien järjestystä. Seuraava suodatin muuttaa yksittäisen sarakkeen lukutapaa.

Älä Miss:

Näyttötaulukko isoilla kirjaimilla suodattimella

Voimme myös käyttää isoja kirjaimia -suodatinta muuttaaksemme AngularJS-taulukon tiedot isoksi kirjaimiksi.

Katsotaanpa esimerkkiä siitä, kuinka voimme saavuttaa tämän.

Näyttötaulukko isoilla kirjaimilla suodattimella

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

  1. Käytämme samaa koodia kuin taulukon luomiseen, ainoa ero tällä kertaa on, että käytämme isojen kirjainten suodatinta. Käytämme tätä suodatinta yhdessä "ptutor.Name":n kanssa, jotta kaikki ensimmäisen sarakkeen teksti näytetään isoilla kirjaimilla.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

ulostulo

Näyttötaulukko isoilla kirjaimilla suodattimella

Ulostulosta,

  • Voimme nähdä, että käyttämällä "isoilla kirjaimilla" -suodatinta, kaikki ensimmäisen sarakkeen tiedot näytetään isoilla kirjaimilla.

Sarakkeen muotoilu on hyödyllistä, ja lukijat haluavat usein rivinumeron sen viereen.

Näytä taulukkoindeksi ($index)

Näytä taulukkoindeksi lisäämällä a $indeksillä.

Katsotaanpa esimerkkiä siitä, kuinka voimme saavuttaa tämän.

Näytä taulukkoindeksi

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

  1. Käytämme samaa koodia kuin taulukon luomisessa, ainoa ero tällä kertaa on se, että lisäämme taulukkoomme ylimääräisen rivin indeksisarakkeen näyttämiseksi. Tässä lisäsarakkeessa käytämme "$index" -ominaisuutta. AngularJS tarjoaa ja sitten +1-operaattorin avulla lisäämään indeksiä jokaiselle riville.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

ulostulo

Näytä taulukkoindeksi

Ulostulosta,

  • Näet, että ylimääräinen sarake on luotu. Tässä sarakkeessa voimme nähdä jokaiselle riville luotavat indeksit.

Kolme riviä mahtuu yhdelle näytölle. Realistinen tietojoukko ei, joten lukijat tarvitsevat tavan hakea sitä.

AngularJS-taulukkotietojen suodattaminen ja hakeminen

AngularJS toimittaa suodattimen nimeltä filter. Sijoitetaan ng-repeat-metodin jälkeen, ja se vertaa jokaista taulukon kohtaa arvoon ja säilyttää vain vastaavat rivit. Sido kyseinen arvo tekstilaatikkoon ng-model-metodilla, jolloin taulukko rajaa itseään lukijan kirjoittaessa ilman tapahtumankäsittelijää tai ohjauskoodia.

Lisää reaaliaikainen haku Box

Lisää yksi syöte taulukon yläpuolelle ja ohjaa taulukko suodattimen läpi. Näillä kahdella on sama scope-ominaisuus, joten AngularJS arvioi lausekkeen uudelleen jokaisella näppäinpainalluksella.

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

  1. Syöte kirjoittaa kaiken, mitä kenttään kirjoitetaan. searchText laajuudessa.
  2. filter : searchText säilyttää rivit, joiden nimi tai Description sisältää kyseisen alimerkkijonon, kirjainkokoa ei huomioida.
  3. Jos haluat hakea vain yhdestä sarakkeesta, anna objekti: filter : {Name : searchText}.
  4. Suodatinketju, joten | filter : searchText | orderBy : 'Name' etsii ensin ja lajittelee sitten eloonjääneet.

Pidä suuret taulukot responsiivisina

Yksi yleinen ongelma AngularJS-taulukoiden kehityksen aikana on suuri tietojoukko, jossa on tuhat riviä tai enemmän. ng-toista direktiivi luo laajuusalueen ja tarkkailijan riviä kohden, joten sivu voi lakata vastaamasta. Levitä rivit sen sijaan sivuille ja lisää track by joten olemassa olevia rivejä käytetään uudelleen sen sijaan, että ne rakennettaisiin uudelleen.

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

UKK

ng-repeat tarvitsee yksilöllisen avaimen jokaiselle riville. Kaksi identtistä arvoa aiheuttaa dupes-virheen. Lisää erillinen ominaisuus tai kirjoita track funktiolla $index, jolloin rivin sijainnista tulee avain sen arvon sijaan.

Kyllä. Välitä avaintaulukko, kuten orderBy : ['Nimi','Description']. AngularJS lajittelee ensimmäisen avaimen mukaan ja katkaisee sitten siteet toiseen. Lisää avaimeen miinusmerkki, jos haluat kääntää avaimen järjestyksen.

Jokainen ng-repeat-rivi näyttää $even- ja $odd-totuusarvot. Sido toinen niistä ng-class- tai ng-if-muuttujalla käyttääksesi taustaväriä, jolloin taulukossa näkyy raidallisia rivejä ilman ylimääräistä CSS-valitsinta.

Avustajat, kuten GitHub Copilot ng-repeat-merkintöjen nopea rakentaminen, mutta silti he keksivät komentosarjapolkuja ja kirjoitusvirheiden määritteitä. Tarkista jokainen ehdotus AngularJS-suodattimen viite ennen laivaaping.

Tekoälytyökalut kirjoittavat ng-repeatin uudelleen ohjausvuolohkoksi ja siirtävät suodattimet putkiksi tai signaaleiksi. Koska Kulma- ei sisällä sisäänrakennettua orderBy- tai suodatinputkea, tarkista jokainen luotu lajittelu ja haku manuaalisesti.

Tiivistä tämä viesti seuraavasti: