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í značky HTML
Značka
- Toto je hlavní značka použitá k zobrazení tabulky.
- Tato značka se používá k oddělení řádků v tabulce.
- Tato značka se používá pro zobrazení skutečných dat tabulky.
- Používá se pro data záhlaví tabulky.
Pomocí výše dostupných značek HTML spolu s AngularJS můžeme usnadnit vyplnění dat tabulky. Stručně řečeno, směrnice ng-repeat se používá k vyplnění údajů v tabulce.
V této kapitole se podíváme, jak toho dosáhnout. Podíváme se také na to, jak můžeme použít filtry orderby a uppercase spolu s použitím atributu $ index k zobrazení indexů úhlové tabulky.
V tomto výukovém programu se naučíte
Naplnění a zobrazení dat v tabulce
Vestavěný filtr AngularJS
Třídit tabulku pomocí filtru OrderBy
Zobrazovací stůl s velkým filtrem
Zobrazit index tabulky ($ index)
Naplnění a zobrazení dat v tabulce
Jak jsme diskutovali 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 vytvářena pomocí běžných značek HTML
,
,
a
. Data se však naplní pomocí direktivy ng-repeat v AngularJS.
Podívejme se na jednoduchý příklad toho, jak můžeme implementovat úhlové tabulky.
V tomto příkladu
Chystáme se vytvořit úhlovou tabulku, která bude obsahovat témata kurzu 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 je přidána na stránku HTML. Toto je standardní způsob přidání jakýchkoli atributů 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áš úhlový stůl a
Druhým je, že by měla být pro naše data úhlové tabulky zavedena výplň.
Krok 2) Dalším krokem je napsání kódu pro vygenerování tabulky a jejích dat.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Vysvětlení kódu:
Nejprve vytvoříme proměnnou nazvanou „tutorial“ a v jednom kroku jí přiřadíme pár párů klíč – hodnota. Každý pár klíč – hodnota bude použit jako data při zobrazení tabulky. Proměnná tutoriálu je poté přiřazena k objektu oboru tak, aby k ní bylo možné přistupovat z našeho pohledu.
Toto je první krok při vytváření tabulky a používáme značku
.
Pro každý řádek dat používáme „direktivu ng-repeat“. Tato směrnice prochází každým párem klíč – hodnota v objektu této, rial oboru pomocí proměnné ptutor.
Nakonec používáme značku
spolu s páry klíč – hodnota (ptutor.Name a ptutor.Description) k zobrazení dat úhlové tabulky.
Pokud je kód úspěšně proveden, 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 řadiči.
Data v tabulce byla generována procházením každého z párů klíč – hodnota pomocí „direktivy ng-repeat“.
Vestavěný filtr AngularJS
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. Než budeme pokračovat, připravme si krátkou rekapitulaci filtrů.
V Angular.JS se filtry používají k formátování hodnoty výrazu před tím, než se zobrazí uživateli. Příkladem filtru je filtr „velkých písmen“, 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 '.
{{TurotialName | velká}}
V této části se podrobněji podíváme na to, jak lze filtry orderBy a velká písmena použít v tabulkách.
Třídit 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 zobrazil, jak je znázorněno níže.
Řadiče
Řadiče v akci
Modely
Modely a závazná data
Směrnice
Pružnost směrnic
Podívejme se na příklad, jak můžeme použít filtr „orderBy“ a třídit data úhlové tabulky pomocí prvního sloupce v tabulce.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Vysvětlení kódu:
Používáme stejný kód jako při vytváření naší tabulky, tentokrát se liší pouze v tom, že používáme filtr „orderBy“ spolu se směrnicí ng-repeat. V tomto případě říkáme, že chceme tabulku objednat pomocí klíče „Jméno“.
Pokud je kód úspěšně proveden, 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 úhlové tabulce byla tříděna podle dat v prvním sloupci. V naší datové sadě data „Direktivy“ pocházejí z dat „Modely“, ale protože jsme použili filtr orderBy, budou tabulky odpovídajícím způsobem tříděny.
Zobrazovací stůl s velkým filtrem
Můžeme také použít filtr velkých písmen ke změně dat v tabulce Úhlová na velká písmena.
Pojďme se podívat na příklad toho, jak toho můžeme dosáhnout.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Vysvětlení kódu:
Používáme stejný kód jako při vytváření naší tabulky, tentokrát se liší pouze 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ě proveden, 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 pomocí 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
s $ index.
Pojďme se podívat na příklad toho, jak toho můžeme dosáhnout.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Vysvětlení kódu:
Používáme stejný kód, jaký jsme použili pro vytvoření naší tabulky, jediným rozdílem je tentokrát to, že do naší tabulky přidáváme další řádek pro zobrazení sloupce indexu.
V tomto dalším sloupci používáme vlastnost „$ index“ poskytnutou AngularJS a poté pomocí operátoru +1 zvyšujeme index pro každý řádek.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu
Vidíte, že byl vytvořen další sloupec. V tomto sloupci vidíme vytváření indexů pro každý řádek.
Souhrn:
Struktury tabulek se vytvářejí pomocí standardních značek dostupných v HTML. Data v tabulce jsou vyplněna pomocí směrnice „ng-repeat“.
Filtr orderBy lze použít k ř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.
Během vývoje s tabulkami AngularJS.JS je běžným problémem implementace velkých datových sad, které mají více než 1000 řádků dat. Někdy může direktiva ng-repeat 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.
