Tabulka AngularJS: Řazení pomocí orderBy a filtrování velkých písmen

⚡ Chytré shrnutí

Řazení, řazení a formátování textu v tabulkách v AngularJS se spoléhají na direktivu ng-repeat a výraz filter. Tato stránka ukazuje, jak orderBy, uppercase, filter a $index promění prostou HTML tabulku v živou mřížku řízenou daty.

🧱 Struktura: Tagy table, tr, td a th stále vytvářejí mřížku, takže žádný specifický kód pro AngularJS nenahrazuje standardní HTML.
🔁 Počet obyvatel: Direktiva ng-repeat prochází polem objektu scope a pro každou nalezenou položku vygeneruje jeden řádek.
↕️ Řazení: Filtr orderBy seřadí řádky podle libovolného klíče a příznak reverse směr na vyžádání obrátí.
🔤 Formátování: Filtr velkých písmen napíše jeden sloupec na velká písmena, aniž by změnil podkladová data v kontroleru.
🔎 Vyhledávání: Filtr vázaný na vstup ng-modelu zužuje viditelné řádky při psaní čtečkou.
🔢 Číslování: Vlastnost $index poskytuje čítač založený na nule, takže přidání jedničky vytvoří čitelný počet řádků.
???? Měřítko: Více než tisíc řádků, spárujte limitTo se stránkováním a track by, aby stránka zůstala responzivní.

Přečíst více

Tabulky jsou jedním z běžných prvků používaných v HTML při práci s webovými stránkami.

Stoly v HTML jsou navrženy pomocí HTML tagu

tag – Toto je hlavní tag používaný pro zobrazení tabulky.
– Tato značka se používá k oddělení řádků v tabulce.
– Tento tag se používá pro zobrazení aktuálních dat tabulky.
– Používá se pro data záhlaví tabulky.

Pomocí výše uvedených dostupných značek HTML spolu s AngularJS, můžeme usnadnit naplnění tabulkových dat. Stručně řečeno, direktiva ng-repeat slouží k vyplnění dat tabulky.

V této kapitole se podíváme na to, jak toho dosáhnout. Také se podíváme na to, jak můžeme použít filtry orderBy a uppercase spolu s atributem $index k zobrazení indexů tabulek AngularJS. Prvním krokem je samotné značkování.

Naplnit a zobrazit data v tabulce

Jak jsme probrali v úvodu této kapitoly, základ pro vytvoření struktury tabulky na stránce HTML zůstává stejný.

Struktura tabulky je stále vytvořena pomocí běžných HTML tagů , , a . Data jsou však naplněna pomocí direktivy ng-repeat v AngularJS.
Podívejme se na jednoduchý příklad, jak můžeme implementovat tabulky v AngularJS.
V tomto příkladu

Vytvoříme tabulku v AngularJS, která bude obsahovat témata kurzů spolu s jejich popisy.

Krok 1) Nejprve přidáme značku „style“ na naši stránku HTML, aby bylo možné tabulku zobrazit jako správnou tabulku.

Značka stylu se přidá na stránku HTML. Toto je standardní způsob, jak přidat jakékoli atributy formátování, které jsou vyžadovány pro prvky HTML.
Do naší tabulky přidáváme dvě hodnoty stylu.

Jedním z nich je, že by měla být pro naši tabulku AngularJS pevná ohraničení a
Za druhé, pro naše tabulková data AngularJS by mělo být zavedeno odsazení.

Krok 2) Dalším krokem je zapsání kódu pro vygenerování tabulky a jejích dat.

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

Warning️ Varování: Tento seznam je reprodukován přesně tak, jak byl publikován, a čtyři řádky v něm jsou chybné. chrset překlepy charsetNajednou se načítají tři sestavení AngularJS, což je o jedno příliš mnoho. lib/bootstrap.js a lib/bootstrap.css neexistují. Ponechte angular.min.js pouze.

Code Vysvětlení

Nejprve vytvoříme proměnnou nazvanou „tutorial“ a v jednom kroku jí přiřadíme několik párů klíč–hodnota. Každý pár klíč–hodnota bude použit jako data při zobrazení tabulky. Proměnná tutoriálu je pak přiřazena k objektu scope, takže k ní lze přistupovat z našeho pohledu.
Toto je první krok při vytváření tabulky a používáme štítek.
Pro každý řádek dat používáme direktivu „ng-repeat“. Tato direktiva prochází každý pár klíč–hodnota v objektu rozsahu kurzu pomocí proměnné ptutor.
Nakonec používáme tag spolu s páry klíč–hodnota (ptutor.Name a ptutor.Description) pro zobrazení dat tabulky AngularJS.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup

Z výše uvedeného výstupu

Vidíme, že tabulka je zobrazena správně s daty z pole párů klíč-hodnota definovaných v kontroléru.
Data tabulky byla vygenerována procházením každého z párů klíč-hodnota pomocí direktivy „ng-repeat“.

Nezpracované řádky jsou pouze výchozím bodem, protože filtry určují, jak jsou tyto řádky seřazeny a formátovány.

AngularJS vestavěný filtr

Je velmi běžné používat vestavěné filtry v AngularJS ke změně způsobu zobrazení dat v tabulkách. Filtry v akci jsme již viděli v dřívější kapitole. Udělejme si rychlou rekapitulaci filtrů, než budeme pokračovat.

V AngularJS se filtry používají k formátování hodnoty výrazu před jejím zobrazením uživateli. Příkladem filtru je filtr „velká písmena“, který na základě výstupu z řetězce naformátuje řetězec a zobrazí všechny znaky v něm jako velká písmena.

Takže v níže uvedeném příkladu, pokud je hodnota proměnné 'TutorialName' 'AngularJS', výstup níže uvedeného výrazu bude 'ANGULARJS'.

V této části se podrobněji podíváme na to, jak lze v tabulkách použít filtry orderBy a velká písmena.

Běžné filtry AngularJS používané s tabulkami

Níže uvedená tabulka porovnává filtry používané nejčastěji uvnitř výrazu ng-repeat.

Filtr	Účel	Příklad
orderBy	Seřadí řádky podle klíče	`\| orderBy : 'Name'`
filtr	Udržuje shodné řádky	`\| filter : searchText`
velká písmena	Velká písmena textu	`\| uppercase`
malými písmeny	Sníží text	`\| lowercase`
limitTo	Počet řádků s velkými písmeny	`\| limitTo : 25`
měna	Formáty peněz	`\| currency : '$'`
datum	Formáty dat	`\| date : 'dd MMM yyyy'`
číslo	Nastaví desetinná čísla	`\| number : 2`

Řazení je filtr, o který čtenáři požadují jako první, takže filtr OrderBy je další na řadě.

Seřadit tabulku pomocí filtru OrderBy

Tento filtr se používá k řazení tabulky na základě jednoho ze sloupců tabulky. V předchozím příkladu vypadal výstup pro data naší tabulky AngularJS, jak je znázorněno níže.

řadiče	Ovladače v akci
modely	Modely a vazebná data
Směrnice	Flexibilita směrnic

Podívejme se na příklad, jak můžeme použít filtr „orderBy“ a seřadit data tabulky AngularJS podle prvního sloupce v tabulce.

<!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 Vysvětlení

Používáme stejný kód jako při vytváření naší tabulky, jediný rozdíl je tentokrát v tom, že používáme filtr „orderBy“ spolu s direktivou ng-repeat. V tomto případě říkáme, že chceme stůl objednat pomocí klíče „Jméno“.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup

Z výstupu,

Vidíme, že data v tabulce AngularJS byla seřazena podle dat v prvním sloupci. Pole je deklarováno v pořadí Controllers, Models, Directives, takže bez filtru se řádky zobrazují v tomto pořadí. orderBy : 'Name' uspořádá hodnoty názvu abecedně, čímž se direktivy posouvají před modely a vznikají kontroléry, direktivy, modely.

Seřadit Reverse a od záhlaví sloupců

Filtr orderBy přijímá druhý argument. true obrací směr a uložení klíče i příznaku do rozsahu umožňuje čtenáři znovu seřadit tabulku kliknutím na záhlaví, protože objednatOdkaz popisuje.

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

Řazení mění pořadí řádků. Další filtr mění, jak se jeden sloupec čte.

Zobrazit tabulku s filtrem velkých písmen

Můžeme také použít filtr velkých písmen ke změně dat v tabulce AngularJS na velká písmena.

Podívejme se na příklad, jak toho můžeme dosáhnout.

<!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 Vysvětlení

Používáme stejný kód jako při vytváření naší tabulky, jediný rozdíl je tentokrát v tom, že používáme filtr velkých písmen. Tento filtr používáme ve spojení s „ptutor.Name“, takže veškerý text v prvním sloupci bude zobrazen velkými písmeny.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup

Z výstupu,

Vidíme, že při použití filtru „velká písmena“ jsou všechna data v prvním sloupci zobrazena velkými písmeny.

Formátování sloupce je užitečné a čtenáři často chtějí vedle něj vidět číslo řádku.

Zobrazit index tabulky ($index)

Chcete-li zobrazit index tabulky, přidejte a s $index.

Podívejme se na příklad, jak toho můžeme dosáhnout.

<!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 Vysvětlení

Používáme stejný kód jako při vytváření naší tabulky, jediný rozdíl je tentokrát v tom, že do naší tabulky přidáváme další řádek pro zobrazení sloupce indexu. V tomto dalším sloupci používáme vlastnost „$index“ poskytuje AngularJS a poté pomocí operátoru +1 zvýšíte index pro každý řádek.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup

Z výstupu,

Můžete vidět, že byl vytvořen další sloupec. V tomto sloupci vidíme indexy vytvářené pro každý řádek.

Na jednu obrazovku se vejdou tři řádky. Realistický datový soubor se nevejde, takže čtenáři potřebují způsob, jak v něm vyhledávat.

Jak filtrovat a vyhledávat data v tabulkách AngularJS

AngularJS dodává filtr s názvem filterPokud je umístěn za ng-repeat, porovnává každou položku v poli s hodnotou a ponechává pouze řádky, které se shodují. Navažte tuto hodnotu na textové pole pomocí ng-model a tabulka se sama zužuje, zatímco čtenář píše, bez obslužné rutiny událostí a kódu kontroleru.

Přidat živé vyhledávání Box

Přidejte jeden vstup nad tabulku a protáhněte pole filtrem. Oba sdílejí stejnou vlastnost scope, takže AngularJS přehodnocuje výraz při každém stisknutí klávesy.

<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 Vysvětlení:

Vstup zapisuje vše, co je do něj zadáno. searchText na rozsahu.
filter : searchText uchovává řádky, jejichž název nebo Description obsahuje daný podřetězec, bez ohledu na velká a malá písmena.
Chcete-li místo toho prohledat jeden sloupec, předejte objekt: filter : {Name : searchText}.
Řetězec filtrů, takže | filter : searchText | orderBy : 'Name' nejdříve prohledává a poté třídí přeživší.

Udržujte velké tabulky responzivní

Jedním z běžných problémů, se kterými se setkáváme během vývoje tabulek AngularJS, je velká datová sada obsahující tisíc nebo více řádků. ng-opakovat Direktiva vytváří rozsah a sledující objekt pro každý řádek, takže stránka může přestat reagovat. Rozložte raději řádky mezi stránky a přidejte track by takže existující řádky se znovu použijí, nikoli se znovu vytvoří.

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

Nejčastější dotazy

ng-repeat potřebuje pro každý řádek unikátní klíč. Dvě identické hodnoty způsobí chybu duplikátů. Přidejte vlastnost distinct nebo napište track pomocí $index, takže klíčem se stává pozice řádku místo jeho hodnoty.

Ano. Předejte pole klíčů, například orderBy : ['Name','DescriptAngularJS seřadí podle prvního klíče a poté přeruší vazby s druhým. Pro inverzi pořadí pouze pro tento klíč přidejte před klíč znaménko mínus.

Každý řádek s ng-repeat zobrazuje booleovské hodnoty $even a $odd. Svázáním jedné z nich s ng-class nebo ng-if se použije barva pozadí, která vytvoří pruhované řádky bez jakéhokoli dalšího CSS selektoru v tabulce.

Asistenti jako např. GitHub Copilot rychle vytvářejí značky s opakováním ng, ale stále vymýšlejí cesty skriptů a chybně píší atributy. Ověřte každý návrh oproti Referenční informace o filtrech v AngularJS před lodíping.

Nástroje umělé inteligence přepisují ng-repeat jako blok řídicího toku a přesouvají filtry do kanálů nebo signálů. Protože ANGULAR nemá vestavěný orderBy ani filtrovací kanál, kontroluje každé vygenerované řazení a vyhledává ručně.

Tabulka AngularJS: Řazení pomocí orderBy a filtrování velkých písmen

Naplnit a zobrazit data v tabulce

Code Vysvětlení

Výstup

AngularJS vestavěný filtr

Běžné filtry AngularJS používané s tabulkami

Seřadit tabulku pomocí filtru OrderBy

Code Vysvětlení

Výstup

Seřadit Reverse a od záhlaví sloupců

Zobrazit tabulku s filtrem velkých písmen

Code Vysvětlení

Výstup

Zobrazit index tabulky ($index)

Code Vysvětlení

Výstup

Jak filtrovat a vyhledávat data v tabulkách AngularJS

Přidat živé vyhledávání Box

Udržujte velké tabulky responzivní

Nejčastější dotazy

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru

Naplnit a zobrazit data v tabulce

Code Vysvětlení

Výstup

AngularJS vestavěný filtr

Běžné filtry AngularJS používané s tabulkami

Seřadit tabulku pomocí filtru OrderBy

Code Vysvětlení

Výstup

Seřadit Reverse a od záhlaví sloupců

SOUVISEJÍCÍ ČLÁNKY

Zobrazit tabulku s filtrem velkých písmen

Code Vysvětlení

Výstup

Zobrazit index tabulky ($index)

Code Vysvětlení

Výstup

Jak filtrovat a vyhledávat data v tabulkách AngularJS

Přidat živé vyhledávání Box

Udržujte velké tabulky responzivní

Nejčastější dotazy

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru