Tabuľka AngularJS: zoradiť, zoradiť & Filter veľkých písmen (príklady)

Obsah:

Anonim

Tabuľky sú jedným z bežných prvkov používaných v HTML pri práci s webovými stránkami.

Tabuľky v HTML sú navrhnuté pomocou značky HTML

  1. Značka - toto je hlavná značka používaná na zobrazenie tabuľky.
    3. - Táto značka sa používa na oddelenie riadkov v tabuľke.
  3. - Táto značka sa používa na zobrazenie skutočných údajov tabuľky.
  		4. - Používa sa pre údaje hlavičky tabuľky.

    Pomocou vyššie dostupných značiek HTML spolu s AngularJS môžeme uľahčiť vyplnenie údajov tabuľky. Stručne povedané, na vyplnenie údajov tabuľky sa používa smernica ng-repeat.

    V tejto kapitole sa pozrieme na to, ako to dosiahnuť. Ďalej sa pozrieme na to, ako môžeme použiť filtre orderby a uppercase spolu s použitím atribútu $ index na zobrazenie indexov uhlovej tabuľky.

    V tomto návode sa naučíte

    • Naplňte a zobrazte údaje v tabuľke
    • Zabudovaný filter AngularJS
    • Triediť tabuľku pomocou filtra OrderBy
    • Tabuľka s veľkým filtrom
    • Zobraziť index tabuľky ($ index)

    Naplňte a zobrazte údaje v tabuľke

    Ako sme už diskutovali v úvode tejto kapitoly, základ pre vytvorenie štruktúry tabuľky na stránke HTML zostáva rovnaký.

    Štruktúra tabuľky je stále vytváraná pomocou bežných značiek HTML značiek

    , ,
    a . Údaje sa však naplnia pomocou smernice ng-repeat v AngularJS.

    Pozrime sa na jednoduchý príklad toho, ako môžeme implementovať uhlové tabuľky.

    V tomto príklade

    Chystáme sa vytvoriť hranatú tabuľku, ktorá bude obsahovať témy kurzu spolu s ich popismi.

    Krok 1) Najprv pridáme na našu stránku HTML značku „style“, aby sa tabuľka mohla zobraziť ako správna tabuľka.

    1. Značka štýlu sa pridá na stránku HTML. Toto je štandardný spôsob pridávania atribútov formátovania, ktoré sú potrebné pre prvky HTML.
    2. Do našej tabuľky pridávame dve hodnoty štýlov.
    • Jedným z nich je, že by náš hranatý stôl a
    • Druhým je to, že by mali byť zavedené výplne pre naše údaje v uhlovej tabuľke.

    Krok 2) Ďalším krokom je napísanie kódu na vygenerovanie tabuľky a jej údajov.

    Event Registration

    Guru99 Global Event
    

    

    

    ControllersControllers in action

    ModelsModels and binding data

    DirectivesFlexibility of Directives

    Vysvetlenie kódu:

    1. Najprv vytvárame premennú nazvanú „tutorial“ a v jednom kroku jej priradíme niekoľko párov kľúč - hodnota. Každý pár kľúč - hodnota sa použije ako dáta pri zobrazení tabuľky. Premenná výučby je potom priradená k objektu rozsahu, aby k nej bolo možné získať prístup z nášho pohľadu.
    2. Toto je prvý krok pri vytváraní tabuľky a používame značku .
    3. Pre každý riadok údajov používame „direktívu ng-repeat“. Táto direktíva prechádza každým párom kľúč - hodnota v objekte tohoto, rial rozsahu pomocou premennej ptutor.
    4. Nakoniec používame značku
      5. spolu s pármi kľúč - hodnota (ptutor.Name a ptutor.Description) na zobrazenie údajov uhlovej tabuľky.

      Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

      Výkon:

      Z vyššie uvedeného výstupu

      • Vidíme, že tabuľka je zobrazená správne s údajmi z poľa párov kľúč - hodnota definovaných v radiči.
      • Dáta tabuľky boli vygenerované prechodom každého z párov kľúč - hodnota pomocou „smernice ng-repeat“.

      Zabudovaný filter AngularJS

      Je veľmi bežné používať vstavané filtre v rámci AngularJS na zmenu spôsobu zobrazovania údajov v tabuľkách. Filtre sme už videli v akcii v staršej kapitole. Skôr ako pokračujeme, urobme si rýchlu rekapituláciu filtrov.

      V Angular.JS sa filtre používajú na formátovanie hodnoty výrazu pred tým, ako sa zobrazí používateľovi. Príkladom filtra je filter „veľkých písmen“, ktorý prijíma výstup z reťazca, formátuje reťazec a zobrazuje všetky znaky v reťazci ako veľké písmená.

      Takže v príklade uvedenom nižšie, ak je hodnota premennej „TutorialName“ „AngularJS“, výstupom z nižšie uvedeného výrazu bude „ANGULARJS“.

      {{TurotialName | veľké písmená }}

      V tejto časti sa podrobnejšie pozrieme na to, ako je možné v tabuľkách použiť filtre orderBy a veľké písmená.

      Triediť tabuľku pomocou filtra OrderBy

      Tento filter sa používa na triedenie tabuľky na základe jedného zo stĺpcov tabuľky. V predchádzajúcom príklade sa výstup našich údajov uhlovej tabuľky zobrazil, ako je uvedené nižšie.

      Kontrolóri Kontrolóri v akcii
      Modely Modely a záväzné údaje
      Smernice Pružnosť smerníc

      Pozrime sa na príklad, ako môžeme použiť filter „orderBy“ a zoradiť údaje uhlovej tabuľky pomocou prvého stĺpca v tabuľke.

      Event Registration

      Guru99 Global Event
      

      

      

      {{ptutor.Name}}{{ptutor.Description}}

      Vysvetlenie kódu:

      1. Používame rovnaký kód ako pri vytváraní našej tabuľky, jediný rozdiel je v tom, že používame filter „orderBy“ spolu so smernicou ng-repeat. V tomto prípade hovoríme, že si chceme tabuľku objednať pomocou klávesu „Meno“.

      Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

      Výkon:

      Z výstupu

      • Vidíme, že údaje v uhlovej tabuľke boli zoradené podľa údajov v prvom stĺpci. V našom súbore údajov údaje „smerníc“ pochádzajú z údajov „modelov“, ale pretože sme použili filter orderBy, tabuľky sa zodpovedajúcim spôsobom zoradia.

      Tabuľka s veľkým filtrom

      Môžeme tiež použiť filter veľkých písmen na zmenu údajov v uhlovej tabuľke na veľké písmená.

      Pozrime sa na príklad toho, ako to môžeme dosiahnuť.

      Event Registration

      Guru99 Global Event
      

      

      

      {{ptutor.Name | uppercase}}{{ptutor.Description}}

      Vysvetlenie kódu:

      1. Používame rovnaký kód ako pri vytváraní našej tabuľky, jediný rozdiel je však v tom, že používame filter veľkých písmen. Tento filter používame v spojení s textom „ptutor.Name“, aby sa všetok text v prvom stĺpci zobrazil veľkými písmenami.

      Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

      Výkon:

      Z výstupu

      • Vidíme, že pomocou filtra „veľké písmená“ sa všetky údaje v prvom stĺpci zobrazujú veľkými písmenami.

      Zobraziť index tabuľky ($ index)

      Ak chcete zobraziť index tabuľky, pridajte znak

      		s indexom $.

      Pozrime sa na príklad toho, ako to môžeme dosiahnuť.

      Event Registration

      Guru99 Global Event
      

      

      

      {{$index + 1}}{{ptutor.Name}}{{ptutor.Description}}

      Vysvetlenie kódu:

      1. Používame rovnaký kód ako pri vytváraní našej tabuľky, jediný rozdiel je však v tom, že do našej tabuľky pridávame ďalší riadok na zobrazenie stĺpca indexu.

        V tomto dodatočnom stĺpci používame vlastnosť „$ index“, ktorú poskytuje AngularJS, a potom pomocou operátora +1 zvyšujeme index pre každý riadok.

      Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

      Výkon:

      Z výstupu

      • Vidíte, že bol vytvorený ďalší stĺpec. V tomto stĺpci môžeme vidieť vytváranie indexov pre každý riadok.

      Zhrnutie:

      • Štruktúry tabuliek sa vytvárajú pomocou štandardných značiek dostupných v HTML. Údaje v tabuľke sa vypĺňajú pomocou smernice „ng-repeat“.
      • Filter orderBy možno použiť na triedenie tabuľky podľa ľubovoľného stĺpca v tabuľke.
      • Filter veľkých písmen je možné použiť na zobrazenie údajov v ľubovoľnom textovom stĺpci s veľkými písmenami.
      • Vlastnosť „$ index“ sa dá použiť na vytvorenie indexu pre tabuľku.
      • Jedným z bežných problémov, s ktorým sa stretli počas vývoja tabuliek AngularJS.JS, je implementácia veľkých množín údajov, ktoré obsahujú viac ako 1000 riadkov údajov. Direktíva ng-repeat môže niekedy prestať reagovať, a preto niekedy prestane reagovať celá stránka. V takom prípade je vždy lepšie mať stránkovanie, v ktorom sú riadky údajov rozložené na viac stránok.