AngularJS ng-repeat direktīva ar piemēru

Satura rādītājs:

Anonim

Atkārtotas informācijas parādīšana

Dažreiz mums var prasīt, lai skatā tiktu parādīts vienumu saraksts, tāpēc jautājums ir, kā mēs savā skata lapā varam parādīt mūsu kontrolierī definēto vienumu sarakstu.

Angular nodrošina direktīvu ar nosaukumu "ng-repeat", kuru var izmantot, lai parādītu mūsu kontrolierī definētās atkārtojošās vērtības.

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

Event Registration

Guru99 Global Event

Topics

  • {{tpname.name}}

Koda skaidrojums:

  1. Kontrolierī vispirms mēs definējam savu sarakstu vienumu masīvu, kuru mēs vēlamies definēt skatā. Šeit mēs esam definējuši masīvu ar nosaukumu "TopicNames", kurā ir trīs vienumi. Katrs vienums sastāv no nosaukuma un vērtības pāra.
  2. Pēc tam TopicsNames masīvs tiek pievienots dalībnieka mainīgajam ar nosaukumu "tēmas" un pievienots mūsu darbības jomas objektam.
  3. Mēs izmantojam HTML tagus
      (Nekārtots saraksts) un
    • (Saraksta vienums), lai parādītu masīva vienumu sarakstu. Pēc tam mēs izmantojam direktīvu ng-repeat, lai ietu cauri katram mūsu masīva vienumam. Vārds "tpname" ir mainīgais, ko izmanto, lai norādītu uz katru masīva tēmu.TopicNames vienumu.
    • Tajā mēs parādīsim katra masīva vienuma vērtību.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja. Tiks parādīti visi masīva vienumi (būtībā tēmu topicames).

Izeja:

Angularjs Vairāki kontrolieri

Uzlabots kontrolieru piemērs varētu būt vairāku kontrolleru koncepcija leņķiskajā JS lietojumprogrammā.

Iespējams, vēlēsities definēt vairākus kontrollerus, lai nošķirtu dažādas biznesa loģikas funkcijas. Iepriekš mēs minējām, ka kontrolierī ir dažādas metodes, kurās vienai metodei ir atsevišķa skaitļu saskaitīšanas un atņemšanas funkcionalitāte. Nu, jums var būt vairāki kontrolieri, lai loģika būtu vairāk nošķirta. Piemēram, jums var būt viens kontrolieris, kas veic tikai darbības ar skaitļiem, un otrs, kas veic darbības ar virknēm.

Apskatīsim piemēru, kā mēs varam definēt vairākus kontrolierus leņķa.JS lietojumprogrammā.

Event Registration

Guru99 Global Event

{{lname}}

Koda skaidrojums:

  1. Šeit mēs definējam 2 kontrolierus, kurus sauc par "firstController" un "secondController". Katram kontrolierim mēs pievienojam arī kodu apstrādei. Mūsu pirmajā kontrolierī mēs pievienojam mainīgo ar nosaukumu "pname", kura vērtība ir "firstController", un otrajā kontrolierī pievienojam mainīgo ar nosaukumu "lname", kura vērtība ir "secondController".
  2. Skatījumā mēs piekļūstam abiem kontrolieriem un izmantojam locekļa mainīgo no otrā kontrollera.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja. Jūs redzēsiet visu “secondController” tekstu, kā paredzēts.

Izeja:

Kopsavilkums

  • Direktīvu ng-reteater var izmantot, lai parādītu vairākus vienumus, kas atkārtojas.
  • Mēs arī apskatījām uzlabotu kontrolieri, kurā tika aplūkota vairāku kontrolieru definīcija lietojumprogrammā.