„AngularJS“ lentelė: Rūšiuoti, Užsakyti & Didžiųjų raidžių filtras (pavyzdžiai)

Turinys:

Anonim

Lentelės yra vienas iš dažniausiai naudojamų HTML elementų dirbant su tinklalapiais.

Lentelės HTML yra sukurtos naudojant HTML žymą

  1. žyma - tai pagrindinė lentelės rodymui naudojama žyma.
    3. - ši žyma naudojama lentelės eilutėms atskirti.
  3. - ši žyma naudojama rodant faktinius lentelės duomenis.
  		4. - Tai naudojama lentelės antraštės duomenims.

    Naudodami anksčiau pateiktas HTML žymas kartu su „AngularJS“, galime palengvinti lentelės duomenų pildymą. Trumpai tariant, lentelė duomenims užpildyti naudojama direktyva ng-repeat.

    Kaip tai pasiekti, ieškosime šio skyriaus metu. Mes taip pat išnagrinėsime, kaip galime naudoti „orderby“ ir didžiųjų raidžių filtrus kartu su $ index atributo naudojimu rodant kampinių lentelių indeksus.

    Šioje pamokoje sužinosite

    • Duomenų pildymas ir pateikimas lentelėje
    • „AngularJS“ įmontuotas filtras
    • Rūšiuoti lentelę su „OrderBy“ filtru
    • Rodyti lentelę su didžiųjų raidžių filtru
    • Rodyti lentelės indeksą ($ index)

    Duomenų pildymas ir pateikimas lentelėje

    Kaip aptarėme šio skyriaus įžangoje, lentelės struktūros kūrimo HTML puslapyje pagrindas išlieka tas pats.

    Lentelės struktūra vis tiek kuriama naudojant įprastas HTML žymes

    , ,
    ir . Tačiau duomenys pateikiami naudojant „AngularJS“ direktyvą „ng-pakartoti“.

    Pažiūrėkime paprastą pavyzdį, kaip mes galime įgyvendinti kampines lenteles.

    Šiame pavyzdyje

    Mes sukursime kampinę lentelę, kurioje bus kurso temos ir jų aprašymai.

    1 žingsnis) Pirmiausia prie savo HTML puslapio pridedame „stiliaus“ žymą, kad lentelę būtų galima rodyti kaip tinkamą lentelę.

    1. Stiliaus žyma pridedama prie HTML puslapio. Tai yra standartinis būdas pridėti bet kokius HTML elementams reikalingus formatavimo atributus.
    2. Prie savo stalo pridedame dvi stiliaus vertybes.
    • Viena yra ta, kad mūsų kampinis stalas turėtų būti tvirtas kraštas ir
    • Antra, kad mūsų kampinės lentelės duomenims reikia įdėti užpildą.

    2 žingsnis) Kitas žingsnis yra parašyti kodą, kad sugeneruotumėte lentelę, ir jos duomenis.

    Event Registration

    Guru99 Global Event
    

    

    

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

    Kodo paaiškinimas:

    1. Pirmiausia kuriame kintamąjį, vadinamą „pamoka“, ir vienu žingsniu jam priskiriame keletą raktų ir verčių porų. Kiekviena raktų ir verčių pora bus naudojama kaip duomenys rodant lentelę. Tada mokymo kintamasis priskiriamas srities objektui, kad jį būtų galima pasiekti iš mūsų rodinio.
    2. Tai yra pirmasis žingsnis kuriant lentelę, ir mes naudojame žymą .
    3. Kiekvienai duomenų eilutei naudojame „ng-pakartojimo direktyvą“. Ši direktyva, naudojant kintamąjį „ptutor“, pereina kiekvieną pagrindinės vertės porą „tuto“, „rial“ taikymo objekte.
    4. Galiausiai mes naudojame žymę
      5. kartu su raktų ir verčių poromis (ptutor.Name ir ptutor.Description), kad būtų rodomi kampinės lentelės duomenys.

      Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

      Išvestis:

      Iš pirmiau pateiktos išvesties

      • Matome, kad lentelė tinkamai rodoma su duomenimis iš valdiklio apibrėžtų raktų ir verčių porų masyvo.
      • Lentelės duomenys buvo sugeneruoti pereinant kiekvieną pagrindinių reikšmių porą naudojant „ng-pakartojimo direktyvą“.

      „AngularJS“ įmontuotas filtras

      Labai dažnai „AngularJS“ įmontuoti filtrai naudojami norint pakeisti duomenų rodymo lentelėse būdą. Jau matėme veikiančius filtrus ankstesniame skyriuje. Greitai užpildykime filtrus, prieš tęsdami.

      „Angular.JS“ filtrai naudojami formatuoti išraiškos vertę, kol ji nebus rodoma vartotojui. Filtro pavyzdys yra „didžiųjų raidžių“ filtras, kuris įgauna eilutės išvestį, suformatuoja eilutę ir visus eilutės simbolius rodo kaip didžiąsias.

      Taigi žemiau pateiktame pavyzdyje, jei kintamojo „TutorialName“ vertė yra „AngularJS“, žemiau esančios išraiškos išvestis bus „ANGULARJS“.

      {{TurotialName | didžiosios raidės}}

      Šiame skyriuje mes panagrinėsime, kaip lentelėse galima išsamiau naudoti „orderBy“ ir „didžiųjų“ filtrus.

      Rūšiuoti lentelę su „OrderBy“ filtru

      Šis filtras naudojamas lentelei rūšiuoti pagal vieną iš lentelės stulpelių. Ankstesniame pavyzdyje mūsų kampinės lentelės duomenų išvestis pasirodė, kaip parodyta žemiau.

      Kontrolieriai Valdikliai veikia
      Modeliai Modeliai ir privalomi duomenys
      Direktyvos Direktyvų lankstumas

      Pažvelkime į pavyzdį, kaip mes galime naudoti filtrą „orderBy“ ir surūšiuoti kampinės lentelės duomenis naudodami pirmąjį lentelės stulpelį.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Kodo paaiškinimas:

      1. Kurdami savo lentelę naudojame tą patį kodą, kurį ir darėme, vienintelis skirtumas šį kartą yra tas, kad kartu su „ng-repeat“ direktyva naudojame filtrą „orderBy“. Šiuo atveju mes sakome, kad mes norime užsakyti lentelę raktu "Vardas".

      Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

      Išvestis:

      Iš išvesties

      • Matome, kad lentelės „Kampinis“ duomenys buvo surūšiuoti pagal pirmojo stulpelio duomenis. Mūsų duomenų rinkinyje „Direktyvos“ duomenys gaunami iš duomenų „Modeliai“, tačiau kadangi pritaikėme filtrą orderBy, lentelės atitinkamai rūšiuojamos.

      Rodyti lentelę su didžiųjų raidžių filtru

      Mes taip pat galime naudoti didžiųjų raidžių filtrą, kad pakeistume „Angular“ lentelės duomenis į didžiąsias.

      Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Kodo paaiškinimas:

      1. Mes naudojame tą patį kodą, kurį naudojome kurdami savo lentelę, vienintelis skirtumas šį kartą yra tas, kad mes naudojame didžiųjų raidžių filtrą. Šį filtrą naudojame kartu su „ptutor.Name“, kad visas pirmojo stulpelio tekstas būtų rodomas didžiosiomis raidėmis.

      Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

      Išvestis:

      Iš išvesties

      • Matome, kad naudojant „didžiųjų“ filtrą visi pirmojo stulpelio duomenys rodomi didžiosiomis raidėmis.

      Rodyti lentelės indeksą ($ index)

      Norėdami rodyti lentelės indeksą, pridėkite

      		su $ index.

      Pažvelkime į pavyzdį, kaip mes galime tai pasiekti.

      Event Registration

      Guru99 Global Event
      

      

      

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

      Kodo paaiškinimas:

      1. Mes naudojame tą patį kodą, kurį naudojome kurdami savo lentelę, vienintelis skirtumas šį kartą yra tai, kad mes įtraukiame papildomą eilutę į savo lentelę rodyti indekso stulpelį.

        Šiame papildomame stulpelyje mes naudojame „$ index“ ypatybę, kurią teikia „AngularJS“, o tada naudodami operatorių +1 kiekvienos eilutės indeksui didinti.

      Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.

      Išvestis:

      Iš išvesties

      • Matote, kad sukurtas papildomas stulpelis. Šiame stulpelyje matome kuriamas kiekvienos eilutės indeksus.

      Santrauka:

      • Lentelių struktūros kuriamos naudojant standartines HTML žymes. Duomenys lentelėje pateikiami naudojant „ng-repeat“ direktyvą.
      • Filtrą „orderBy“ galima naudoti rūšiuojant lentelę pagal bet kurį lentelės stulpelį.
      • Didžiųjų raidžių filtras gali būti naudojamas duomenims rodyti bet kuriame teksto stulpelyje didžiosiomis raidėmis.
      • Ypatybę "$ index" galima naudoti lentelės indeksui sukurti.
      • Viena iš bendrų problemų, su kuria susidurta kuriant „AngularJS.JS“ lenteles, yra didelių duomenų rinkinių, kuriuose yra daugiau nei 1000 duomenų eilučių, diegimas. Kartais „ng-pakartojimo“ direktyva gali nebeatsakyti, todėl kartais nereaguoja visas puslapis. Tokiu atveju visada geriau turėti puslapiavimą, kuriame duomenų eilutės būtų paskirstytos keliuose puslapiuose.