Kampinė JS pakartojimo direktyva su pavyzdžiu

Turinys:

Anonim

Rodoma pakartotinė informacija

Kartais mums gali tekti rodinyje rodyti daiktų sąrašą, todėl kyla klausimas, kaip mes galime rodyti valdiklyje apibrėžtų elementų sąrašą savo peržiūros puslapyje.

„Angular“ pateikia direktyvą, vadinamą „ng-repeat“, kuri gali būti naudojama rodant pasikartojančias reikšmes, apibrėžtas mūsų valdiklyje.

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

Event Registration

Guru99 Global Event

Topics

  • {{tpname.name}}

Kodo paaiškinimas:

  1. Valdiklyje pirmiausia nustatome savo sąrašo elementų masyvą, kurį norime apibrėžti rodinyje. Čia mes apibrėžėme masyvą, pavadintą "TopicNames", kuriame yra trys elementai. Kiekvieną elementą sudaro vardo ir vertės pora.
  2. Tada „TopicsNames“ masyvas pridedamas prie nario kintamojo, vadinamo „temos“, ir pridedamas prie mūsų srities objekto.
  3. Mes naudojame HTML žymes
      (Neužsakytas sąrašas) ir
    • (Sąrašo elementas), kad būtų rodomas masyvo elementų sąrašas. Tada mes naudojame „ng-repeat“ direktyvą, norėdami pereiti kiekvieną elementą iš savo masyvo. Žodis „tpname“ yra kintamasis, naudojamas norint nurodyti kiekvieną elementą masyvo temose.TopicNames.
    • Tuo parodysime kiekvieno masyvo elemento vertę.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis. Matysite visus matricos elementus (iš esmės Temų pavadinimai temose).

Išvestis:

„Angularjs“ keli valdikliai

Išplėstinis valdiklio pavyzdys galėtų būti kelių valdiklių turėjimas kampinėje JS programoje.

Galbūt norėsite apibrėžti kelis valdiklius, kad atskirtumėte skirtingas verslo logikos funkcijas. Anksčiau minėjome apie skirtingų metodų valdiklį, kuriame vienas metodas turėjo atskirą funkciją skaičiams pridėti ir atimti. Na, jūs galite turėti kelis valdiklius, kad logika būtų pažangesnė. Pavyzdžiui, galite turėti vieną valdiklį, kuris atlieka tik skaičių operacijas, o kitą - su eilutėmis.

Pažvelkime į pavyzdį, kaip mes galime apibrėžti kelis valdiklius „angular.JS“ programoje.

Event Registration

Guru99 Global Event

{{lname}}

Kodo paaiškinimas:

  1. Čia mes apibrėžiame 2 valdiklius, vadinamus "firstController" ir "secondController". Kiekvienam valdikliui taip pat pridedame tam tikrą kodą apdorojimui. Prie savo „firstController“ pridedame kintamąjį, vadinamą „pname“, kurio vertė yra „firstController“, o „secondController“ - kintamąjį, pavadintą „lname“, kurio vertė yra „secondController“.
  2. Rodinyje mes prieiname abu valdiklius ir naudojame nario kintamąjį iš antrojo valdiklio.

Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis. Matysite visą „secondController“ tekstą, kaip tikėtasi.

Išvestis:

Santrauka

  • „Ng-reteater“ direktyva gali būti naudojama keliems pasikartojantiems elementams rodyti.
  • Mes taip pat pažvelgėme į pažangų valdiklį, kuris apžvelgė kelių valdiklių apibrėžimą programoje.