Kaip naudoti „ng-model“ „AngularJS“ su PAVYZDŽIAIS

Turinys:

Anonim

Kas yra ng modelis AngularJs?

„ng-model“ yra „Angular.JS“ direktyva, vaizduojanti modelius, o jos pagrindinis tikslas yra susieti „vaizdą“ su „modeliu“.

Pvz., Tarkime, kad norėjote galutiniam vartotojui pateikti paprastą puslapį, tokį, koks parodyta žemiau, kuriame naudotojo prašoma teksto laukeliuose įvesti „Vardas“ ir „Pavardė“. Tada norėjote įsitikinti, kad saugote informaciją, kurią vartotojas įvedė į jūsų duomenų modelį.

Galite naudoti „ng-model“ direktyvą, kad „Vardas“ ir „Pavardė“ teksto laukelio laukus susietumėte su savo duomenų modeliu.

„Ng-model“ direktyva užtikrins, kad duomenys „rodinyje“ ir jūsų „modelio“ duomenys visą laiką būtų sinchronizuojami.

Šioje pamokoje sužinosite

  • „Ng-model“ atributas
  • Kaip naudoti „ng-model“
    • Teksto sritis
    • Įvesties elementai
    • Pasirinkite elemento formos išskleidžiamąjį meniu

„Ng-model“ atributas

Kaip aptarta šio skyriaus įžangoje, atributas „ng-model“ naudojamas susieti jūsų modelio duomenis su vartotojui pateiktu rodiniu.

Naudojamas ng-model atributas,

  1. Įrišimas valdo tokius elementus kaip įvestis, teksto sritis ir rodinyje pasirenka modelį.
  2. Nurodykite patvirtinimo elgseną, pavyzdžiui, prie teksto laukelio galima pridėti patvirtinimą, kad į teksto laukelį galima įvesti tik skaitinius simbolius.
  3. Atributas „ng-model“ palaiko valdymo būseną (Pagal būseną mes turime omenyje, kad valdiklis ir duomenys privalo būti visada sinchronizuojami. Jei pasikeis mūsų duomenų vertė, tai automatiškai pakeis valdiklio reikšmę ir priešingai)

Kaip naudoti „ng-model“

1) Teksto sritis

Teksto srities žyma naudojama apibrėžti kelių eilučių teksto įvesties valdiklį. Teksto srityje gali būti neribotas simbolių skaičius, o tekstas pateikiamas fiksuoto pločio šriftu.

Taigi dabar pažvelkime į paprastą pavyzdį, kaip galime pridėti „ng-model“ direktyvą prie teksto srities valdiklio.

Šiame pavyzdyje norime parodyti, kaip mes galime perduoti kelių eilučių eilutę iš valdiklio į rodinį ir pridėti šią vertę prie teksto srities valdiklio.

Event Registration


Guru99 Global Event


   Topic Description:

   

Kodo paaiškinimas:

  1. „ Ng-model“ direktyva naudojama pridedant kintamąjį „pDescription“ prie valdiklio „textarea“.

    Kintamajame „pDescription“ iš tikrųjų bus tekstas, kuris bus perduotas teksto srities valdikliui. Mes taip pat paminėjome 2 teksto srities valdiklio atributus, kurie yra eilutės = 4 ir stulpeliai = 50. Šie atributai buvo paminėti, kad galėtume parodyti kelias teksto eilutes. Apibrėžiant šiuos atributus, dabar teksto srityje bus 4 eilutės ir 50 stulpelių, kad būtų galima rodyti kelias teksto eilutes.

  2. Čia pridedame nario kintamąjį prie srities objekto, vadinamo „pDescription“, ir kintamajam pridedame eilutės vertę.
  3. Atkreipkite dėmesį, kad / n literalą dedame į eilutę, kad tekstas galėtų būti kelių eilučių, kai jis rodomas teksto srityje. „/ N literal“ padalija tekstą į kelias eilutes, kad teksto srityje jis būtų pateiktas kaip kelios teksto eilutės.

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

Išvestis:

Iš išvesties

  • Aiškiai matoma, kad kintamajam „pDescription“ priskirta reikšmė kaip srities objekto dalis buvo perduota „textarea“ valdikliui.
  • Vėliau jis buvo rodomas įkėlus puslapį.

2) Įvesties elementai

„Ng-model“ direktyva taip pat gali būti taikoma įvesties elementams, tokiems kaip teksto laukelis, žymės langeliai, radijo mygtukai ir kt.

Pažvelkime į pavyzdį, kaip mes galime naudoti „ng-model“ su „textbox“ ir „checkbox“ įvesties tipais.

Čia turėsime teksto įvesties tipą, kurio pavadinimas bus „Guru99“, ir bus 2 žymės langeliai, vienas bus pažymėtas pagal numatytuosius nustatymus, o kitas nebus pažymėtas.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Kodo paaiškinimas:

  1. „ Ng-model“ direktyva naudojama nario kintamajam „pname“ pridėti prie įvesties tipo teksto valdiklio. Kintamajame „pname“ bus „Guru99“ tekstas, kuris bus perduotas teksto įvesties valdikliui. Atkreipkite dėmesį, kad nario kintamajam gali būti suteiktas bet koks vardas.
  2. Čia mes apibrėžiame savo pirmąjį žymimąjį laukelį „Valdikliai“, kuris pridedamas prie narių kintamojo „Temos.Kontrolieriai“. Šiam tikrinimo valdikliui bus pažymėtas žymimasis laukelis.
  3. Čia mes apibrėžiame savo pirmąjį žymimąjį laukelį „Modeliai“, kuris pridedamas prie narių kintamojo „Topics.Models“. Šio žymėjimo langelio žymės langelis nebus pažymėtas.
  4. Čia pridedame nario kintamąjį, vadinamą „pName“, ir pateikiame eilutės reikšmę „Guru99“.
  5. Mes skelbiame nario masyvo kintamąjį, vadinamą „Temos“, ir suteikiame jam dvi reikšmes: pirmoji yra „teisinga“, o antroji - „klaidinga“.

    Taigi, kai pirmasis žymimasis laukelis gauna reikšmę „true“, šio valdiklio žymės langelis bus pažymėtas, taip pat, kadangi antroji reikšmė yra klaidinga, šio valdiklio žymės langelis nebus pažymėtas.

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

Išvestis:

Iš išvesties

  • Gerai matyti, kad kintamajam „pName“ priskirta reikšmė yra „Guru99“
  • Kadangi pirmoji patikrinimo reikšmė yra „teisinga“, ji pažymėta žymės langelyje „Valdikliai“. Panašiai, kadangi antra reikšmė yra klaidinga, žymimasis laukelis „Modeliai“ nėra pažymėtas.

3) Pasirinkite elemento formos išskleidžiamąjį meniu

„Ng-model“ direktyva taip pat gali būti taikoma pasirinktam elementui ir gali būti naudojama sąrašo elementams pildyti pasirinktame sąraše.

Pažvelkime į pavyzdį, kaip mes galime naudoti ng modelį su pasirinktu įvesties tipu.

Čia turėsime teksto įvesties tipą, kurio pavadinimas bus „Guru99“, ir bus pasirinktas sąrašas su 2 sąrašo elementais „Valdiklis“ ir „Modeliai“.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. „ Ng-model“ direktyva naudojama priskirti kintamąjį, vadinamą „Temos“, prie pasirinkto tipo valdiklio. Pasirinkto valdiklio viduje kiekvienai parinkčiai pridedame nario kintamąjį Topics.option1 pirmajai parinkčiai ir Topics.option2 antrai parinkčiai.
  2. Čia mes apibrėžiame savo temų masyvo kintamąjį, kuriame yra 2 raktų ir verčių poros. Pirmosios poros vertė yra „Valdikliai“, o antrosios - „Modeliai“. Šios vertės bus perduotos norint pasirinkti įvesties žymą rodinyje.

    Jei kodas bus sėkmingai įvykdytas, bus rodoma ši išvestis.

Išvestis:

Iš išvesties matyti, kad kintamajam „pName“ priskirta reikšmė yra „Guru99“ ir matome, kad pasirinktame įvesties valdiklyje yra parinktys „Valdikliai“ ir „Modeliai“.

Santrauka

  • Kampinio JS modelius atspindi ng modelio direktyva. Pagrindinis šios direktyvos tikslas yra susieti vaizdą su modeliu. Kaip sukurti paprastą valdiklį naudojant „ng-app“, „ng-controller“ ir „ng-model“ direktyvas.
  • „Ng-model“ direktyvą galima susieti su „teksto srities“ įvesties valdikliu, o daugialypės eilutės gali būti perduotos iš valdiklio į rodinį.
  • „Ng-model“ direktyvą galima susieti su įvesties valdikliais, tokiais kaip teksto ir žymimųjų laukelių valdikliai, kad jie būtų dinamiškesni vykdymo metu.
  • „Ng-model“ direktyvą taip pat galima naudoti norint užpildyti pasirinktą sąrašą su parinktimis, kurias galima parodyti vartotojui.