AngularJS tabula: kārtot, pasūtīt pa & Lielo burtu filtrs (piemēri)

Satura rādītājs:

Anonim

Galdi ir viens no izplatītākajiem HTML elementiem, kas tiek izmantoti, strādājot ar tīmekļa lapām.

HTML tabulas tiek veidotas, izmantojot HTML tagu

  1. tags - tas ir galvenais tags, ko izmanto tabulas parādīšanai.
    3. - šo tagu izmanto, lai nošķirtu tabulas rindas.
  3. - šo tagu izmanto, lai parādītu faktiskos tabulas datus.
  		4. - Tas tiek izmantots tabulas galvenes datiem.

    Izmantojot iepriekš pieejamos HTML tagus kopā ar AngularJS, mēs varam atvieglot tabulas datu aizpildīšanu. Īsāk sakot, tabulas datu aizpildīšanai tiek izmantota direktīva ng-repeat.

    Kā to panākt, mēs apskatīsim šīs nodaļas laikā. Mēs arī izskatīsim, kā mēs varam izmantot orderby un lielo burtu filtrus, kā arī atribūtu $ index, lai parādītu leņķa tabulas indeksus.

    Šajā apmācībā jūs uzzināsiet

    • Datu aizpildīšana un parādīšana tabulā
    • Iebūvēts AngularJS filtrs
    • Kārtot tabulu ar filtru OrderBy
    • Displeja tabula ar lielo burtu filtru
    • Parādīt tabulas indeksu ($ index)

    Datu aizpildīšana un parādīšana tabulā

    Kā mēs apspriedām šīs nodaļas ievadā, tabulas struktūras izveides pamats HTML lapā paliek nemainīgs.

    Tabulas struktūra joprojām tiek veidota, izmantojot parastos HTML tagus

    , ,
    un . Tomēr dati tiek aizpildīti, izmantojot AnggJS direktīvu ng-repeat.

    Apskatīsim vienkāršu piemēru, kā mēs varam ieviest leņķiskās tabulas.

    Šajā piemērā

    Mēs izveidosim leņķisko tabulu, kurā būs kursu tēmas un to apraksti.

    1. solis. Mēs vispirms pievienosim tagam "stils" mūsu HTML lapai, lai tabulu varētu parādīt kā pareizu tabulu.

    1. Stila tags tiek pievienots HTML lapai. Šis ir standarta veids, kā pievienot visus HTML elementiem nepieciešamos formatēšanas atribūtus.
    2. Mēs savai tabulai pievienojam divas stila vērtības.
    • Viens ir tas, ka mūsu leņķiskajam galdam jābūt stingrai robežai un
    • Otrkārt, mūsu leņķiskās tabulas datiem ir jāievieto polsterējums.

    2. solis . Nākamais solis ir rakstīt kodu, lai ģenerētu tabulu, un tā dati.

    Event Registration

    Guru99 Global Event
    

    

    

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

    Koda skaidrojums:

    1. Vispirms mēs izveidojam mainīgo ar nosaukumu “apmācība” un piešķiram tam dažus atslēgu un vērtību pārus vienā solī. Katrs atslēgas vērtību pāris tiks izmantots kā dati, parādot tabulu. Pēc tam apmācības mainīgais tiek piešķirts darbības objektam, lai tam varētu piekļūt no mūsu skatījuma.
    2. Šis ir pirmais solis tabulas izveidē, un mēs izmantojam tagu .
    3. Katrai datu rindai mēs izmantojam "ng-repeat direktīva". Šī direktīva iziet katru atslēgu un vērtību pāri tuto, rial scope objektā, izmantojot mainīgo ptutor.
    4. Visbeidzot, mēs izmantojam tagu
      5. kopā ar atslēgas vērtību pāriem (ptutor.Name un ptutor.Description), lai parādītu tabulas Angular tabulas datus.

      Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

      Izeja:

      No iepriekš minētās izejas

      • Mēs varam redzēt, ka tabula tiek pareizi parādīta ar datiem no kontrolierī definētā atslēgas vērtību pāru masīva.
      • Tabulas dati tika ģenerēti, izejot cauri katram atslēgas vērtību pārim, izmantojot "ng-repeat direktīvu".

      Iebūvēts AngularJS filtrs

      AngularJS iekšējo filtru izmantošana ir ļoti izplatīta, lai mainītu veidu, kā dati tiek parādīti tabulās. Mēs jau redzējām filtrus darbībā iepriekšējā nodaļā. Pieņemsim ātri apkopot filtrus, pirms mēs turpinām iet uz priekšu.

      Vietnē Angular.JS filtri tiek izmantoti, lai formatētu izteiksmes vērtību, pirms tā tiek parādīta lietotājam. Filtra piemērs ir “lielo burtu” filtrs, kas iegūst virknes izvadi un formatē virkni un visas virknes rakstzīmes parāda kā lielos burtus.

      Tātad zemāk esošajā piemērā, ja mainīgā “TutorialName” vērtība ir “AngularJS”, zemāk esošās izteiksmes izeja būs “ANGULARJS”.

      {{TurotialName | lielie burti }}

      Šajā sadaļā mēs aplūkosim, kā tabulās sīkāk var izmantot orderBy un lielos filtrus.

      Kārtot tabulu ar filtru OrderBy

      Šis filtrs tiek izmantots, lai kārtotu tabulu, pamatojoties uz vienu no tabulas kolonnām. Iepriekšējā piemērā mūsu leņķiskās tabulas datu izvade parādījās, kā parādīts zemāk.

      Kontrolieri Kontrolieri darbībā
      Modeļi Modeļi un saistošie dati
      Direktīvas Direktīvu elastība

      Apskatīsim piemēru, kā mēs varam izmantot filtru "orderBy" un kārtot tabulas leņķiskos datus, izmantojot tabulas pirmo kolonnu.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Koda skaidrojums:

      1. Lai izveidotu tabulu, mēs izmantojam to pašu kodu, ko izmantojām, šoreiz vienīgā atšķirība ir tā, ka mēs izmantojam filtru "orderBy" kopā ar direktīvu ng-repeat. Šajā gadījumā mēs sakām, ka mēs vēlamies pasūtīt tabulu pēc atslēgas "Nosaukums".

      Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

      Izeja:

      No izejas

      • Mēs varam redzēt, ka tabulas Angular dati ir sakārtoti atbilstoši datiem pirmajā kolonnā. Mūsu datu kopā dati par direktīvām nāk no datiem par modeļiem, taču, tā kā mēs izmantojām filtru orderBy, tabulas tiek attiecīgi sakārtotas.

      Displeja tabula ar lielo burtu filtru

      Mēs varam arī izmantot lielo burtu filtru, lai mainītu tabulas Angular datus uz lielajiem burtiem.

      Apskatīsim piemēru, kā mēs to varam sasniegt.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Koda skaidrojums:

      1. Mēs izmantojam to pašu kodu, ko izmantojām, lai izveidotu tabulu, vienīgā atšķirība šoreiz ir tā, ka mēs izmantojam lielo burtu filtru. Mēs izmantojam šo filtru kopā ar ptutor.Name, lai viss pirmās kolonnas teksts tiktu parādīts ar lielajiem burtiem.

      Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

      Izeja:

      No izejas

      • Mēs varam redzēt, ka, izmantojot filtru “lielie burti”, visi dati pirmajā kolonnā tiek parādīti ar lielajiem burtiem.

      Parādīt tabulas indeksu ($ index)

      Lai parādītu tabulas indeksu, pievienojiet

      		ar $ index.

      Apskatīsim piemēru, kā mēs to varam sasniegt.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Koda skaidrojums:

      1. Lai izveidotu tabulu, mēs izmantojam to pašu kodu, ko izmantojām, šoreiz vienīgā atšķirība ir tā, ka tabulai pievienojam papildu rindu, lai parādītu indeksa kolonnu.

        Šajā papildu slejā mēs izmantojam rekvizītu "$ index", ko nodrošina AngularJS, un pēc tam izmantojam operatoru +1, lai palielinātu katras rindas indeksu.

      Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

      Izeja:

      No izejas

      • Var redzēt, ka ir izveidota papildu kolonna. Šajā slejā mēs varam redzēt indeksus, kas tiek veidoti katrai rindai.

      Kopsavilkums:

      • Tabulu struktūras tiek veidotas, izmantojot HTML tagos pieejamos standarta tagus. Dati tabulā ir aizpildīti, izmantojot direktīvu "ng-repeat".
      • Filtru orderBy var izmantot, lai kārtotu tabulu, pamatojoties uz jebkuru tabulas kolonnu.
      • Lielo burtu filtru var izmantot, lai parādītu datus jebkurā teksta kolonnā ar lielajiem burtiem.
      • Rekvizītu "$ index" var izmantot, lai izveidotu tabulas indeksu.
      • Viena izplatīta problēma, ar kuru saskārās, izstrādājot AngularJS.JS tabulas, ir lielu datu kopu ieviešana, kurās ir vairāk nekā 1000 datu rindu. Dažreiz direktīva ng-repeat var kļūt nereaģējoša, un līdz ar to dažreiz visa lapa nereaģē. Šādā gadījumā vienmēr labāk ir izmantot lapošanu, kurā datu rindas ir sadalītas vairākās lapās.