Kā lietot 'ng-model' AngularJS ar PIEMĒRIEM

Satura rādītājs:

Anonim

Kas ir ng-modelis AngularJs?

ng-model ir direktīva Angular.JS, kas pārstāv modeļus, un tā galvenais mērķis ir piesaistīt "skatu" "modelim".

Piemēram, pieņemsim, ka jūs galalietotājam gribējāt uzrādīt vienkāršu lapu, piemēram, to, kas parādīta zemāk, kurā lietotājam tiek lūgts tekstlodziņos ievadīt “Vārds” un “Uzvārds”. Pēc tam jūs vēlējāties pārliecināties, ka jūs glabājat informāciju, kuru lietotājs ir ievadījis jūsu datu modelī.

Varat izmantot direktīvu ng-model, lai kartēs “Vārds” un “Uzvārds” tekstlodziņa laukus piesaistītu savam datu modelim.

Ng-modeļa direktīva nodrošinās, ka dati "skatā" un jūsu "modeļa" dati visu laiku tiek sinhronizēti.

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

  • Atribūts ng-model
  • Kā izmantot ng-modeli
    • Teksta apgabals
    • Ievades elementi
    • Atlasiet elementa formu Nolaižamā izvēlne

Ng-modeļa atribūts

Kā tika apspriests šīs nodaļas ievadā, atribūts ng-model tiek izmantots, lai jūsu modelī esošos datus piesaistītu lietotājam parādītajam skatam.

Tiek izmantots atribūts ng-model,

  1. Iesiešanas vadīklas, piemēram, ievade, teksta apgabals, un atlasa skatā modelī.
  2. Norādiet apstiprināšanas darbību - piemēram, tekstlodziņā var pievienot validāciju, ka tekstlodziņā var ievadīt tikai ciparu rakstzīmes.
  3. Atribūts ng-model uztur vadības stāvokli (Pēc stāvokļa mēs domājam, ka vadīkla un dati vienmēr ir jāsaglabā sinhronizācijā. Ja mainīsies mūsu datu vērtība, tas automātiski mainīs vadības vērtību un pretēji)

Kā izmantot ng-modeli

1) teksta apgabals

Teksta apgabala tagu izmanto, lai definētu vairākrindu teksta ievades vadību. Teksta apgabalā var būt neierobežots rakstzīmju skaits, un teksts tiek renderēts ar fiksēta platuma fontu.

Tāpēc tagad aplūkosim vienkāršu piemēru, kā mēs varam pievienot ng modeļa direktīvu teksta apgabala vadībai.

Šajā piemērā mēs vēlamies parādīt, kā mēs varam nodot daudzrindu virkni no kontrollera skatam un piesaistīt šo vērtību teksta apgabala vadībai.

Event Registration


Guru99 Global Event


   Topic Description:

   

Koda skaidrojums:

  1. Direktīva ng modelis tiek izmantots, lai pievienotu loceklis mainīgo sauc par "pDescription" uz "textarea" kontrole.

    Mainīgajā "pDescription" faktiski būs teksts, kas tiks pārsūtīts uz teksta apgabala vadību. Mēs arī pieminējām 2 atribūtus textarea vadībai, kas ir rindas = 4 un kolonnas = 50. Šie atribūti ir minēti, lai mēs varētu parādīt vairākas teksta rindas. Definējot šos atribūtus, tekstlodziņā tagad būs 4 rindas un 50 kolonnas, lai tas varētu parādīt vairākas teksta rindas.

  2. Šeit mēs pievienojam mainīgo locekli darbības objektam ar nosaukumu "pDescription" un mainīgajam piešķiram virknes vērtību.
  3. Ņemiet vērā, ka mēs ievietojam / n literālu virknē, lai teksts varētu būt vairāku rindiņu, kad tas tiek parādīts teksta apgabalā. Burts / n burtu sadala tekstu vairākās rindās, lai to tekstu apgabalā varētu atveidot kā vairākas teksta rindas.

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

Izeja:

No izejas

  • Var skaidri redzēt, ka vērtība, kas piešķirta mainīgajam pDescription kā darbības jomas objekta sastāvdaļa, tika nodota textarea vadībai.
  • Pēc tam tas ir parādīts, kad lapa tiek ielādēta.

2) Ievades elementi

Direktīvu ng-model var piemērot arī tādiem ievades elementiem kā tekstlodziņš, izvēles rūtiņas, radiopogas utt.

Apskatīsim piemēru, kā mēs varam izmantot ng-modeli ar ievades veidu "textbox" un "checkbox".

Šeit mums būs teksta ievades veids, kuram būs nosaukums "Guru99", un būs 2 izvēles rūtiņas, viena tiks atzīmēta pēc noklusējuma, bet otra netiks atzīmēta.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Koda skaidrojums:

  1. Direktīva ng modelis tiek izmantots, lai pievienotu loceklis mainīgo sauc par "pname" uz ieejas tipa teksta kontroli. Mainīgais "pname" satur "Guru99" tekstu, kas tiks pārsūtīts uz teksta ievades vadību. Ņemiet vērā, ka dalībnieka mainīgā nosaukumam var piešķirt jebkuru nosaukumu.
  2. Šeit mēs definējam mūsu pirmo izvēles rūtiņu "Controllers", kas ir pievienota dalībnieka mainīgajam Topics.Controllers. Šīs izvēles rūtiņas izvēles rūtiņa tiks atzīmēta.
  3. Šeit mēs definējam savu pirmo izvēles rūtiņu "Modeļi", kas ir pievienota dalībnieka mainīgajam Topics.Models. Šīs izvēles rūtiņas izvēles rūtiņa netiks atzīmēta.
  4. Šeit mēs pievienojam locekļa mainīgo ar nosaukumu "pName" un ievietojam virknes vērtību "Guru99".
  5. Mēs pasludinām locekļa masīva mainīgo ar nosaukumu "Tēmas" un piešķiram tam divas vērtības, pirmā ir "true", bet otrā "false".

    Tātad, kad pirmā izvēles rūtiņa saņem vērtību true, šai izvēles rūtiņai tiks atzīmēta izvēles rūtiņa, un tāpat kā otrā vērtība ir nepatiesa, šīs izvēles rūtiņa netiks atzīmēta.

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

Izeja:

No izejas

  • Var skaidri redzēt, ka mainīgajam pName piešķirtā vērtība ir "Guru99"
  • Tā kā pirmā pārbaudes vērtība ir “patiesa”, tā ir izturēta, izvēles rūtiņa “Vadītāji” ir atzīmēta. Tāpat kā otrā vērtība ir nepatiesa, izvēles rūtiņa "Modeļi" nav atzīmēta.

3) Atlasiet elementa formas nolaižamo izvēlni

Ng modeļa direktīvu var piemērot arī atlasītajam elementam, un to var izmantot, lai aizpildītu saraksta vienumus atlases sarakstā.

Apskatīsim piemēru, kā mēs varam izmantot ng modeli ar izvēlēto ievades veidu.

Šeit mums būs teksta ievades tips, kuram būs nosaukums "Guru99", un būs atlasīts saraksts ar 2 saraksta vienumiem "Vadītājs" un "Modeļi".

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Direktīva ng modelis tiek izmantots, lai pievienotu loceklis mainīgo sauc par "Tēmas", lai izvēlieties tipa kontroli. Atlasītās vadīklas iekšienē katrai no opcijām mēs pievienojam Topics.option1 locekļa mainīgo pirmajai opcijai un Topics.option2 otrajai opcijai.
  2. Šeit mēs definējam mūsu tematu masīva mainīgo, kurā ir 2 atslēgu un vērtību pāri. Pirmajam pārim ir vērtība "Kontrolieri", bet otrajam - "Modeļi". Šīs vērtības tiks nodotas, lai skatā atlasītu ievades tagu.

    Ja kods ir veiksmīgi izpildīts, tiks parādīta šāda izvade.

Izeja:

Pēc izejas var redzēt, ka mainīgajam pName piešķirtā vērtība ir "Guru99", un mēs varam redzēt, ka izvēlētajai ievades vadībai ir opcijas "Kontrolieri" un "Modeļi".

Kopsavilkums

  • Leņķa JS modeļus attēlo ng modeļa direktīva. Šīs direktīvas galvenais mērķis ir piesaistīt skatu modelim. Kā izveidot vienkāršu kontrolieri, izmantojot direktīvas ng-app, ng-controller un ng-model.
  • Ng modeļa direktīvu var saistīt ar "teksta apgabala" ievades vadību, un daudzrindu virknes no kontroliera var nodot skatam.
  • Ng modeļa direktīvu var saistīt ar ievades vadīklām, piemēram, teksta un izvēles rūtiņu vadīklām, lai padarītu tās dinamiskākas izpildes laikā.
  • Ng modeļa direktīvu var izmantot arī, lai aizpildītu atlasīto sarakstu ar opcijām, kuras var parādīt lietotājam.