Hvordan bruke 'ng-model' i AngularJS med EKSEMPLER

Innholdsfortegnelse:

Anonim

Hva er ng-model i AngularJs?

ng-model er et direktiv i Angular.JS som representerer modeller og dets primære formål er å binde "visningen" til "modellen".

Anta for eksempel at du ønsket å presentere en enkel side til sluttbrukeren, som den som vises nedenfor, der du blir bedt om å angi "Fornavn" og "Etternavn" i tekstbokser. Og så ønsket du å sikre at du lagrer informasjonen som brukeren har lagt inn i datamodellen din.

Du kan bruke ng-modelldirektivet til å tilordne tekstfeltfeltene "Fornavn" og "Etternavn" til datamodellen din.

Direktivet om ng-modellen vil sikre at dataene i "visningen" og den til "modellen" blir synkronisert hele tiden.

I denne veiledningen vil du lære-

  • Ng-modellattributtet
  • Hvordan bruke ng-modell
    • Tekstområde
    • Inndataelementer
    • Velg element fra rullegardinmeny

Ng-modellen Attributt

Som diskutert i innledningen til dette kapittelet, brukes attributtet ng-model til å binde dataene i modellen din til visningen som presenteres for brukeren.

Attributtet ng-model brukes til,

  1. Bindende kontroller som inngang, tekstområde og velger i visningen inn i modellen.
  2. Gi en valideringsadferd - for eksempel kan en validering legges til i en tekstboks som bare numeriske tegn kan legges inn i tekstboksen.
  3. Ng-modellattributtet opprettholder tilstanden til kontrollen (Med tilstand mener vi at kontrollen og dataene alltid er synkronisert. Hvis verdien av dataene våre endres, vil den automatisk endre verdien i kontrollen og omvendt)

Hvordan bruke ng-modell

1) Tekstområde

Tekstområdekoden brukes til å definere en tekstlinjekontroll for flere linjer. Tekstområdet kan inneholde et ubegrenset antall tegn, og teksten gjengis med en skrift med fast bredde.

Så la oss se på et enkelt eksempel på hvordan vi kan legge ng-modelldirektivet til en tekstområdekontroll.

I dette eksemplet ønsker vi å vise hvordan vi kan sende en flerlinjestreng fra kontrolleren til visningen og knytte den verdien til tekstområdekontrollen.

Event Registration


Guru99 Global Event


   Topic Description:

   

Kode Forklaring:

  1. Den ng-modellen direktiv benyttes til å feste den medlemsvariabel som kalles "pDescription" til "tekstområde" kontroll.

    Variabelen "pDescription" vil faktisk inneholde teksten, som sendes videre til tekstområdet kontrollen. Vi har også nevnt to attributter for tekstområdekontrollen som er rader = 4 og cols = 50. Disse attributtene er nevnt slik at vi kan vise flere tekstlinjer. Ved å definere disse attributtene vil tekstområdet nå ha 4 rader og 50 kolonner slik at det kan vise flere tekstlinjer.

  2. Her legger vi ved medlemsvariabelen til omfangsobjektet kalt "pDescription" og setter en strengverdi til variabelen.
  3. Merk at vi setter / n bokstavelig i strengen slik at teksten kan ha flere linjer når den vises i tekstområdet. Bokstavene / n deler opp teksten i flere linjer slik at den kan gjengis i tekstområdekontrollen som flere tekstlinjer.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Produksjon:

Fra utgangen

  • Det kan tydelig sees at verdien tilordnet pDescription-variabelen som en del av omfangsobjektet ble overført til tekstområdekontrollen.
  • Deretter har den blitt vist når siden lastes inn.

2) Inngangselementer

Direktivet om ng-modellen kan også brukes på inngangselementene som tekstboksen, avkrysningsruter, radioknapper osv.

La oss se på et eksempel på hvordan vi kan bruke ng-modellen med inngangstypen "tekstboks" og "avkrysningsrute".

Her vil vi ha en tekstinntastingstype som vil ha navnet "Guru99" og det vil være to avkrysningsruter, en som vil være merket som standard og den andre vil ikke bli merket.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Kode Forklaring:

  1. Den ng-modellen direktiv benyttes til å feste den medlemsvariabel som kalles "pname" i teksten styreinngang type. "Pname" -variabelen vil inneholde teksten til "Guru99" som sendes videre til tekstinntastingskontrollen. Merk at ethvert navn kan gis til navnet på medlemsvariabelen.
  2. Her definerer vi vår første avkrysningsrute "Kontrollere" som er knyttet til medlemsvariabelen Topics.Controllers. Avkrysningsboksen vil være merket for denne kontrollkontrollen.
  3. Her definerer vi vår første avkrysningsrute "Modeller" som er knyttet til medlemsvariabelen Topics.Models. Avkrysningsboksen vil ikke være merket for denne kontrollkontrollen.
  4. Her legger vi ved medlemsvariabelen kalt "pName" og setter en strengverdi på "Guru99".
  5. Vi erklærer en medlemsmatrixvariabel kalt "Topics" og gir den to verdier, den første er "true" og den andre er "false".

    Så når den første avkrysningsboksen får verdien til sant, vil avkrysningsboksen merkes for denne kontrollen, og på samme måte, siden den andre verdien er falsk, vil ikke avkrysningsboksen bli merket for denne kontrollen.

Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.

Produksjon:

Fra utgangen,

  • Det kan tydelig sees at verdien tilordnet pName-variabelen er "Guru99"
  • Siden den første avkrysningsverdien er "sann", passerte den, er avkrysningsboksen merket for "Kontrollere". Siden den andre verdien er falsk, er ikke avmerkingsboksen merket for "Modeller".

3) Velg element fra rullegardin

Direktivet om ng-modellen kan også brukes på selekteringselementet og brukes til å fylle ut listeelementene i listen.

La oss se på et eksempel på hvordan vi kan bruke ng-modellen med den valgte inngangstypen.

Her vil vi ha en tekstinntastingstype som vil ha navnet "Guru99" og det vil være en utvalgsliste med to listeelementer av "Controller" og "Modeller".

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Den ng-modellen direktiv brukes til å feste medlem variabel kalt "Topics" til å velge typen kontroll. Inne i valgkontrollen, for hvert av alternativene, legger vi til medlemsvariabelen for Topics.option1 for det første alternativet og Topics.option2 for det andre alternativet.
  2. Her definerer vi vår emne-variabel som inneholder to nøkkelverdipar. Det første paret har verdien "Kontrollere" og det andre har verdien "Modeller". Disse verdiene overføres for å velge inndatakode i visningen.

    Hvis koden er utført vellykket, vil følgende utdata vises.

Produksjon:

Fra utgangen kan det sees at verdien tilordnet pName-variabelen er "Guru99", og vi kan se at den valgte inngangskontrollen har alternativene "Kontrollere" og "Modeller".

Sammendrag

  • Modeller i Angular JS er representert av ng-modelldirektivet. Hovedformålet med dette direktivet er å binde utsikten til modellen. Hvordan bygge en enkel kontroller ved hjelp av ng-app-, ng-controller- og ng-modelldirektivet.
  • Direktivet om ng-modellen kan knyttes til en "tekstområde" -inngangskontroll og flerlinjestrenger kan sendes fra kontrolleren til visningen.
  • Direktivet om ng-modellen kan knyttes til inngangskontroller som tekst- og avkrysningsboksen for å gjøre dem mer dynamiske på kjøretid.
  • Direktivet om ng-modellen kan også brukes til å fylle ut en utvalgsliste med alternativer som kan vises for brukeren.