AngularJS-taulukko: lajittelu, järjestys ja isot kirjaimet suodatin [esimerkkejä]

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

HTML-taulukot on suunniteltu HTML-tunnisteen avulla

tag – Tämä on päätunniste, jota käytetään taulukon näyttämiseen.
– Tätä tunnistetta käytetään taulukon rivien erottamiseen.
– Tätä tunnistetta käytetään todellisten taulukkotietojen näyttämiseen.
– 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.

Katsomme, kuinka tämä saavutetaan tämän luvun aikana. Tarkastellaan myös, kuinka voimme käyttää orderby- ja isokirjaimia suodattimia sekä $index-attribuutin käyttöä kulmataulukon indeksien näyttämiseen.

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ä siitä, kuinka voimme toteuttaa Angular-taulukoita.
Tässä esimerkissä

Aiomme luoda Angular-taulukon, jossa on kurssin aiheet ja niiden kuvaukset.

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

Tyylitunniste lisätään HTML-sivulle. Tämä on tavallinen tapa lisätä kaikki HTML-elementeille vaadittavat muotoiluattribuutit.
Lisäämme taulukkoomme kaksi tyyliarvoa.

Yksi on, että Angular-pöydällämme tulisi olla kiinteä reunus
Toiseksi Angular-taulukon tiedoille tulisi laittaa pehmusteet.

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

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

Koodin selitys

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.
Tämä on ensimmäinen vaihe taulukon luomisessa, ja käytämme tag.
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.
Lopuksi käytämme -tunniste sekä avain-arvo-parit (ptutor.Name ja ptutor.Descriptioni) näyttääksesi kulmataulukon tiedot.

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

ulostulo

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

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.

Angular.JS:ssä suodattimia käytetään lausekkeen arvon muotoilemiseen ennen kuin se näytetään käyttäjälle. Esimerkki suodattimesta on "isoilla kirjaimilla" oleva suodatin, joka ottaa merkkijonotulosteen ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit isoina kirjaimina.

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

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

Lajittele taulukko Järjestyksen mukaan -suodattimella

Tätä suodatinta käytetään lajittelemaan taulukko yhden taulukon sarakkeen perusteella. Edellisessä esimerkissä kulmataulukon tietojen tulos näytti alla olevan kuvan mukaisesti.

ohjaimet	Ohjaimet toiminnassa
Mallit	Mallit ja sitovat tiedot
ohjeet	Direktiivien joustavuus

Katsotaanpa esimerkkiä, kuinka voimme käyttää “orderBy”-suodatinta ja lajitella Angular-taulukon tiedot taulukon ensimmäisen sarakkeen avulla.

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

Koodin selitys

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

Ulostulosta,

Näemme, että Angular-taulukon tiedot on lajiteltu ensimmäisen sarakkeen tietojen mukaan. Tietojoukossamme "Directives" -tiedot tulevat "Malleista" -tiedoista, mutta koska käytimme orderBy-suodatinta, taulukot lajitellaan sen mukaan.

Näyttötaulukko isoilla kirjaimilla suodattimella

Voimme myös käyttää isojen kirjainten suodatinta muuttaaksesi Angular-taulukon tiedot isoiksi kirjaimiksi.

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

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

Koodin selitys

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

Ulostulosta,

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

Näytä taulukkoindeksi ($index)

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

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

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

Koodin selitys

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

Ulostulosta,

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

Yhteenveto

Taulukkorakenteet luodaan käyttämällä sisällä olevia vakiotunnisteita HTML. Taulukon tiedot täytetään "ng-repeat" -direktiivin avulla.
OrderBy-suodattimen avulla taulukko voidaan lajitella minkä tahansa taulukon sarakkeen perusteella.
Isot kirjaimet -suodatinta voidaan käyttää näyttämään tiedot missä tahansa tekstipohjaisessa sarakkeessa isoilla kirjaimilla.
Ominaisuutta "$index" voidaan käyttää indeksin luomiseen taulukkoon.
Yksi yleinen AngularJS.JS-taulukoiden kehittämisen aikana havaittu ongelma on suurten tietojoukkojen toteutus, jossa on yli 1000 riviä tietoja. Joskus ng-toista direktiivi voi muuttua reagoimattomaksi, jolloin koko sivu ei vastaa toisinaan. Tällaisessa tapauksessa on aina parempi sivutus, jossa tietorivit on hajallaan useille sivuille.

Saatat tykätä:

Täytä ja näytä tiedot taulukossa

Koodin selitys

ulostulo

AIHEESEEN LIITTYVÄT ARTIKKELIT

Sisäänrakennettu AngularJS-suodatin

Lajittele taulukko Järjestyksen mukaan -suodattimella

Koodin selitys

ulostulo

Näyttötaulukko isoilla kirjaimilla suodattimella

Koodin selitys

ulostulo

Näytä taulukkoindeksi ($index)

Koodin selitys

ulostulo

Yhteenveto