Tabulka AngularJS: řazení, řazení podle a filtr velkých písmen [Příklady]

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

Tabulky 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. Podíváme se také na to, jak můžeme použít filtry orderby a velká písmena spolu s použitím atributu $index k zobrazení indexů Angular tabulky.

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 Angular tabulky.
V tomto příkladu

Vytvoříme Angular tabulku, která bude mít 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ěl existovat pevný okraj pro náš hranatý stůl a
Druhým je, že by měla být zavedena výplň pro naše data Angular tabulky.

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>

Vysvětlení kódu

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 úhlové tabulky.

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

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 Angular.JS se filtry používají k formátování hodnoty výrazu předtím, než se zobrazí uživateli. Příkladem filtru je filtr 'velká písmena', který přebírá výstup řetězce a formátuje řetězec a zobrazuje všechny znaky v řetězci 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.

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 se výstup pro data naší úhlové tabulky objevil tak, jak je uvedeno 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 třídit data Angular tabulky pomocí 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>

Vysvětlení kódu

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 Angular byla seřazena podle dat v prvním sloupci. V naší datové sadě data „Directives“ pocházejí z dat „Models“, ale protože jsme použili filtr orderBy, tabulky jsou seřazeny podle toho.

Zobrazit tabulku s filtrem velkých písmen

Pomocí filtru velkých písmen můžeme také změnit data v tabulce Angular 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>

Vysvětlení kódu

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.

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>

Vysvětlení kódu

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.

Shrnutí

Struktury tabulek jsou vytvářeny pomocí standardních značek dostupných v rámci HTML. Data v tabulce se vyplňují pomocí direktivy „ng-repeat“.
Filtr orderBy lze použít k seřazení tabulky na základě libovolného sloupce v tabulce.
Filtr velkých písmen lze použít k zobrazení dat v libovolném textovém sloupci velkými písmeny.
Vlastnost „$index“ lze použít k vytvoření indexu pro tabulku.
Jedním z běžných problémů, se kterými se setkáváme během vývoje s tabulkami AngularJS.JS, je implementace velkých datových sad, které mají více než 1000 řádků dat. Někdy ng-opakovat direktiva může přestat reagovat, a proto celá stránka občas přestane reagovat. V takovém případě je vždy lepší mít stránkování, ve kterém jsou řádky dat rozloženy na více stránek.

Máš rád:

Naplnit a zobrazit data v tabulce

Vysvětlení kódu

Výstup

SOUVISEJÍCÍ ČLÁNKY

AngularJS vestavěný filtr

Seřadit tabulku pomocí filtru OrderBy

Vysvětlení kódu

Výstup

Zobrazit tabulku s filtrem velkých písmen

Vysvětlení kódu

Výstup

Zobrazit index tabulky ($index)

Vysvětlení kódu

Výstup

Shrnutí