AngularJS tablica: Sortiranje pomoću orderBy i filtra za velika slova

By: James Hartman James Hartman
Hours Ažurirano

⚡ Pametni sažetak

Sortiranje, uređivanje i formatiranje teksta u AngularJS tablicama oslanjaju se na direktivu ng-repeat i izraz filtera. Ova stranica pokazuje kako orderBy, uppercase, filter i $index pretvaraju običnu HTML tablicu u aktivnu mrežu vođenu podacima.

  • 🧱 Struktura: Oznake table, tr, td i th i dalje grade mrežu, tako da nijedan AngularJS specifičan markup ne zamjenjuje standardni HTML.
  • 🔁 Stanovništvo: Direktiva ng-repeat prolazi kroz niz na objektu scope i emitira jedan red za svaku pronađenu stavku.
  • ↕️ Naručivanje: Filter orderBy sortira retke po bilo kojem ključu, a zastavica obrnutog smjera mijenja smjer na zahtjev.
  • 🔤 Oblikovanje: Filter velikih slova stavlja jedan stupac u veliki broj bez mijenjanja temeljnih podataka u kontroleru.
  • 🔎 Pretraživanje: Filter vezan na ulaz ng-modela sužava vidljive retke dok čitač tipka.
  • 🔢 Numeriranje: Svojstvo $index daje brojač koji se temelji na nuli, pa dodavanje jedinice daje čitljiv broj retka.
  • 🚀 skala: Nakon tisuću redaka, uparite limitTo s paginacijom i track by kako bi stranica ostala responzivna.
Pročitaj više

Tablica AngularJS

Tablice su jedan od uobičajenih elemenata koji se koriste u HTML-u pri radu s web stranicama.

Stolovi u HTML dizajnirani su pomoću HTML oznake

  1. oznaka – Ovo je glavna oznaka koja se koristi za prikaz tablice.
  2. – Ova oznaka se koristi za odvajanje redaka unutar tablice.
  3. – Ova oznaka se koristi za prikaz stvarnih podataka tablice.
  4. – Ovo se koristi za podatke zaglavlja tablice.

Koristeći gore navedene dostupne HTML oznake zajedno s AngularJS, možemo olakšati popunjavanje podataka tablice. Ukratko, direktiva ng-repeat koristi se za popunjavanje podataka u tablici.

U ovom poglavlju ćemo pogledati kako to postići. Također ćemo pogledati kako možemo koristiti filtere orderBy i uppercase zajedno s atributom $index za prikaz indeksa AngularJS tablica. Prvi korak je samo označavanje.

Popunjavanje i prikaz podataka u tablici

Kao što smo spomenuli u uvodu u ovo poglavlje, osnova za stvaranje strukture tablice na HTML stranici ostaje ista.

Struktura tablice i dalje se stvara pomoću uobičajenih HTML oznaka , , i . Međutim, podaci se popunjavaju pomoću direktive ng-repeat u AngularJS-u.
Pogledajmo jednostavan primjer kako možemo implementirati AngularJS tablice.
U ovom primjeru

Napravit ćemo AngularJS tablicu koja će sadržavati teme tečaja zajedno s njihovim opisima.

Korak 1) Prvo ćemo dodati oznaku "style" na našu HTML stranicu kako bi se tablica mogla prikazati kao ispravna tablica.

Popunjavanje i prikaz podataka u tablici

  1. Oznaka stila dodaje se HTML stranici. Ovo je standardni način za dodavanje atributa oblikovanja koji su potrebni za HTML elemente.
  2. U našu tablicu dodajemo dvije stilske vrijednosti.
  • Jedan je da bi trebala postojati čvrsta granica za našu AngularJS tablicu i
  • Drugo je da bi trebalo biti postavljeno punjenje (padding) za naše podatke u AngularJS tablici.

Korak 2) Sljedeći korak je pisanje koda za generiranje tablice i njenih podataka.

Popunjavanje i prikaz podataka u tablici

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

⚠️ Upozorenje: Ovaj popis je reproduciran točno onako kako je objavljen, a četiri retka u njemu su neispravna. chrset pogrešno napisane riječi charsetTri AngularJS builda se učitavaju odjednom, što je jedan previše. lib/bootstrap.js i lib/bootstrap.css ne postoje. Zadrži angular.min.js samo.

Code Objašnjenje

  1. Prvo stvaramo varijablu pod nazivom "tutorial" i dodjeljujemo joj parove ključ-vrijednost u jednom koraku. Svaki par ključ-vrijednost koristit će se kao podatak prilikom prikaza tablice. Varijabla vodiča se zatim dodjeljuje objektu opsega tako da mu se može pristupiti iz našeg pogleda.
  2. Ovo je prvi korak u stvaranju tablice, a koristimo se označiti.
  3. Za svaki redak podataka koristimo "naredbu ng-repeat". Ova direktiva prolazi kroz svaki par ključ-vrijednost u objektu opsega vodiča pomoću varijable ptutor.
  4. Konačno, koristimo se oznaku zajedno s parovima ključ-vrijednost (ptutor.Name i ptutor.Description) za prikaz podataka iz AngularJS tablice.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz

Popunjavanje i prikaz podataka u tablici

Iz gornjeg izlaza,

  • Vidimo da je tablica ispravno prikazana s podacima iz niza parova ključ-vrijednost definiranih u kontroleru.
  • Podaci tablice generirani su prolaskom kroz svaki od parova ključ-vrijednost korištenjem direktive "ng-repeat".

Sirovi retci su samo početna točka, jer filteri određuju kako su ti retci poredani i formatirani.

AngularJS ugrađeni filtar

Vrlo je uobičajeno koristiti ugrađene filtere unutar AngularJS-a za promjenu načina na koji se podaci prikazuju u tablicama. Već smo vidjeli filtre na djelu u prethodnom poglavlju. Kratko ponovimo filtre prije nego što nastavimo.

U AngularJS-u se filteri koriste za formatiranje vrijednosti izraza prije nego što se prikaže korisniku. Primjer filtera je filter 'uppercase' koji uzima izlazni niz, formatira ga i prikazuje sve znakove u nizu kao velika slova.

Dakle, u donjem primjeru, ako je vrijednost varijable 'TutorialName' 'AngularJS', izlaz donjeg izraza bit će 'ANGULARJS'.

{{ TutorialName | uppercase }}

U ovom ćemo odjeljku detaljnije pogledati kako se filtri OrderBy i velika slova mogu koristiti u tablicama.

Uobičajeni AngularJS filteri koji se koriste s tablicama

Donja tablica uspoređuje filtere koji se najčešće koriste unutar ng-repeat izraza.

Filter Svrha Primjer
Naruči po Sortira retke po ključu | orderBy : 'Name'
filtriranje Održava odgovarajuće retke | filter : searchText
velikim slovima Velika slova u tekstu | uppercase
malim slovima Spušta tekst | lowercase
ograničenjeDo Broj redaka s velikim slovima | limitTo : 25
valuta Formatira novac | currency : '$'
podaci Formati datuma | date : 'dd MMM yyyy'
broj Postavlja decimale | number : 2

Sortiranje je filter koji čitatelji prvo traže, pa je sljedeći filter orderBy.

Poredaj tablicu s filtrom OrderBy

Ovaj filter se koristi za sortiranje tablice na temelju jednog od stupaca tablice. U prethodnom primjeru, izlaz za naše podatke iz AngularJS tablice izgledao je kao što je prikazano u nastavku.

Kontroleri Kontrolori u akciji
Modeli Modeli i uvezujući podaci
Direktive Fleksibilnost direktiva

Pogledajmo primjer kako možemo koristiti filter "orderBy" i sortirati podatke AngularJS tablice koristeći prvi stupac u tablici.

Poredaj tablicu s filtrom 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 Objašnjenje

  1. Koristimo isti kôd kao i za kreiranje naše tablice, jedina razlika je ovaj put što koristimo filter "orderBy" zajedno s direktivom ng-repeat. U ovom slučaju kažemo da želimo poredati tablicu po ključu “Ime”.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz

Poredaj tablicu s filtrom OrderBy

Iz izlaza,

  • Možemo vidjeti da su podaci u AngularJS tablici sortirani prema podacima u prvom stupcu. Niz je deklariran redoslijedom Kontroleri, Modeli, Direktive, pa se bez filtera retci pojavljuju tim redoslijedom. Primjena orderBy : 'Name' slaže vrijednosti Name po abecednom redu, što pomiče Direktive ispred Modela i stvara Kontrolere, Direktive, Modele.

Poredaj u Reverse i iz zaglavlja stupaca

Filter orderBy prihvaća drugi argument. Prosljeđivanje true obrće smjer, a pohranjivanje i ključa i te zastavice na opseg omogućuje čitatelju da ponovno sortira tablicu klikom na zaglavlje, kao narudžbaPo referenci opisuje.

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

Redoslijed mijenja redoslijed redaka. Sljedeći filtar mijenja način čitanja jednog stupca.

POVEZANI ČLANCI

Prikaz tablice s filtrom za velika slova

Također možemo koristiti filter velikih slova za promjenu podataka u AngularJS tablici u velika slova.

Pogledajmo primjer kako to možemo postići.

Prikaz tablice s filtrom za velika slova

<!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 Objašnjenje

  1. Koristimo isti kod kao i za kreiranje naše tablice, jedina razlika je što ovaj put koristimo filter velikim slovima. Koristimo ovaj filtar u kombinaciji s “ptutor.Name” tako da će sav tekst u prvom stupcu biti prikazan velikim slovima.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz

Prikaz tablice s filtrom za velika slova

Iz izlaza,

  • Vidimo da se korištenjem filtra "velika slova" svi podaci u prvom stupcu prikazuju velikim slovima.

Formatiranje stupca je korisno, a čitatelji često žele broj retka pokraj njega.

Prikaz indeksa tablice ($index)

Za prikaz indeksa tablice dodajte a s indeksom $.

Pogledajmo primjer kako to možemo postići.

Prikaži indeks tablice

<!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 Objašnjenje

  1. Koristimo isti kôd kao i za kreiranje naše tablice, jedina razlika je ovaj put što dodajemo dodatni red u našu tablicu za prikaz stupca indeksa. U ovom dodatnom stupcu koristimo svojstvo “$index” pruža AngularJS, a zatim koristite operator +1 za povećanje indeksa za svaki redak.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz

Prikaži indeks tablice

Iz izlaza,

  • Možete vidjeti da je stvoren dodatni stupac. U ovom stupcu možemo vidjeti indekse koji se stvaraju za svaki redak.

Tri reda stanu na jedan zaslon. Realističan skup podataka ne stane, pa čitateljima treba način da ga pretražuju.

Kako filtrirati i pretraživati ​​podatke u AngularJS tablici

AngularJS isporučuje filter pod nazivom filterSmješten nakon ng-repeat, uspoređuje svaku stavku u polju s vrijednošću i zadržava samo retke koji se podudaraju. Povežite tu vrijednost s tekstualnim okvirom pomoću ng-model i tablica se sama sužava dok čitač tipka, bez rukovatelja događajima i bez koda kontrolera.

Dodajte pretraživanje uživo Box

Dodajte jedan ulaz iznad tablice i propustite niz kroz filter. Oba dijele isto svojstvo opsega, pa AngularJS ponovno procjenjuje izraz pri svakom pritisku tipke.

<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 Objašnjenje:

  1. Ulaz zapisuje sve što se upiše searchText na opsegu.
  2. filter : searchText čuva retke čiji Naziv ili Description sadrži taj podniz, ignorirajući velika i mala slova.
  3. Za pretraživanje jednog stupca, proslijedite objekt: filter : {Name : searchText}.
  4. Lanac filtera, tako | filter : searchText | orderBy : 'Name' prvo pretražuje, a zatim sortira preživjele.

Održavajte velike tablice responzivnima

Jedan uobičajeni problem koji se javlja tijekom razvoja AngularJS tablica je veliki skup podataka koji sadrži tisuću ili više redaka. ng-ponovi Direktiva stvara opseg i promatrača po retku, tako da stranica može prestati reagirati. Umjesto toga, rasporedite retke po stranicama i dodajte track by pa se postojeći retci ponovno koriste, a ne obnavljaju.

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

Pitanja i odgovori

ng-repeat treba jedinstveni ključ za svaki redak. Dvije identične vrijednosti uzrokuju grešku duplikata. Dodajte svojstvo distinct ili napišite track pomoću $index tako da pozicija retka postaje ključ umjesto njegove vrijednosti.

Da. Proslijedite niz ključeva, kao što je orderBy : ['Name','DescriptAngularJS sortira po prvom ključu, a zatim prekida veze s drugim. Ispred ključa stavite znak minus kako biste preokrenuli redoslijed samo tog ključa.

Svaki ng-repeat redak otkriva booleove vrijednosti $even i $odd. Povežite jedan od njih s ng-class ili ng-if kako biste primijenili boju pozadine, što stvara prugaste retke bez ikakvog dodatnog CSS selektora na tablici.

Pomoćnici kao što su GitHub kopilot brzo izrađuju ng-repeat markup, a ipak i dalje izmišljaju putanje skripti i krivo pišu atribute. Provjerite svaki prijedlog u odnosu na Referenca za AngularJS filter prije brodaping.

Alati umjetne inteligencije prepisuju ng-repeat kao blok kontrolnog toka i premještaju filtere u cijevi ili signale. Jer Kutni nema ugrađeni orderBy ili filter pipe, pregledajte svako generirano sortiranje i pretraživanje ručno.

Sažmite ovu objavu uz: