Hvad er ng-model i AngularJs?
ng-model er et direktiv i Angular.JS, der repræsenterer modeller, og dets primære formål er at binde "visningen" til "modellen".
Antag for eksempel, at du ville præsentere en simpel side for slutbrugeren som den nedenfor, der beder brugeren om at indtaste "Fornavn" og "Efternavn" i tekstbokse. Og så ønskede du at sikre, at du lagrer de oplysninger, som brugeren har indtastet i din datamodel.
Du kan bruge ng-model-direktivet til at kortlægge tekstfeltfelterne med "Fornavn" og "Efternavn" til din datamodel.
Direktivet om ng-modellen vil sikre, at dataene i "visningen" og din "model" holdes synkroniseret hele tiden.
I denne vejledning lærer du-
- Attributten ng-model
- Sådan bruges ng-model
- Tekstområde
- Inputelementer
- Vælg elementformular Dropdown
Ng-model Attribut
Som diskuteret i indledningen til dette kapitel bruges attributten ng-model til at binde dataene i din model til den visning, der præsenteres for brugeren.
Attributten ng-model bruges til,
- Bindende kontroller som input, tekstområde og vælger i visningen til modellen.
- Giv en valideringsadfærd - for eksempel kan en validering føjes til et tekstfelt, hvor kun numeriske tegn kan indtastes i tekstfeltet.
- Attributten ng-model opretholder tilstanden for kontrollen (Ved tilstand mener vi, at kontrollen og dataene altid skal holdes synkroniseret. Hvis værdien af vores data ændres, ændrer den automatisk værdien i kontrollen og omvendt)
Sådan bruges ng-model
1) Tekstområde
Tekstområdekoden bruges til at definere en tekstinputkontrol med flere linjer. Tekstområdet kan indeholde et ubegrænset antal tegn, og teksten gengives i en skrifttype med fast bredde.
Så lad os nu se på et simpelt eksempel på, hvordan vi kan føje ng-model-direktivet til en tekstområdekontrol.
I dette eksempel vil vi vise, hvordan vi kan overføre en flerlinjestreng fra controlleren til visningen og vedhæfte denne værdi til tekstområdekontrollen.
Event Registration Guru99 Global Event
Kode Forklaring:
- Direktivet om ng-modellen bruges til at vedhæfte medlemsvariablen kaldet "pDescription" til "textarea" -kontrollen.
Variablen "pDescription" indeholder faktisk teksten, som sendes videre til tekstområdet kontrol. Vi har også nævnt 2 attributter til tekstarea-kontrollen, som er rækker = 4 og cols = 50. Disse attributter er blevet nævnt, så vi kan vise flere tekstlinjer. Ved at definere disse attributter har tekstområdet nu 4 rækker og 50 kolonner, så det kan vise flere tekstlinjer.
- Her knytter vi medlemsvariablen til omfangsobjektet kaldet "pDescription" og sætter en strengværdi til variablen.
- Bemærk, at vi sætter / n bogstaveligt i strengen, så teksten kan have flere linjer, når den vises i tekstområdet. Bogstavet / n opdeler teksten i flere linjer, så den kan gengives i tekstområdet som flere tekstlinjer.
Hvis koden udføres med succes, vises følgende output, når du kører koden i browseren.
Produktion:
Fra output
- Det kan tydeligt ses, at den værdi, der er tildelt variablen pDescription som en del af omfangsobjektet, blev videregivet til tekstarealet.
- Derefter er det blevet vist, når siden indlæses.
2) Inputelementer
Direktivet om ng-modellen kan også anvendes på inputelementerne såsom tekstboksen, afkrydsningsfelter, radioknapper osv.
Lad os se på et eksempel på, hvordan vi kan bruge ng-modellen med inputtypen "tekstboks" og "afkrydsningsfelt".
Her vil vi have en tekstindtastningstype, der har navnet "Guru99", og der vil være 2 afkrydsningsfelter, den ene vil blive markeret som standard, og den anden vil ikke blive markeret.
Event Registration Guru99 Global Event
Kode Forklaring:
- Direktivet om ng-modellen bruges til at vedhæfte medlemsvariablen kaldet "pname" til inputkontrolteksten. Variablen "pname" vil indeholde teksten i "Guru99", som sendes videre til tekstindtastningskontrol. Bemærk, at ethvert navn kan gives til navnet på medlemsvariablen.
- Her definerer vi vores første afkrydsningsfelt "Controllers", der er knyttet til medlemsvariablen Topics.Controllers. Afkrydsningsfeltet markeres for denne kontrolkontrol.
- Her definerer vi vores første afkrydsningsfelt "Modeller", der er knyttet til medlemsvariablen Topics.Models. Afkrydsningsfeltet markeres ikke for denne kontrolkontrol.
- Her vedhæfter vi medlemsvariablen kaldet "pName" og lægger en strengværdi på "Guru99".
- Vi erklærer en medlemsarrayvariabel kaldet "Emner" og giver den to værdier, den første er "sand" og den anden er "falsk".
Så når det første afkrydsningsfelt får værdien sand, markeres afkrydsningsfeltet for denne kontrol, og da den anden værdi er falsk, vil afkrydsningsfeltet ikke blive markeret for denne kontrol.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan tydeligt ses, at den værdi, der er tildelt pName-variablen, er "Guru99"
- Da den første kontrolværdi er "sand", passerede den, afkrydsningsfeltet er markeret for afkrydsningsfeltet "Controllers". Da den anden værdi er ligeledes, er afkrydsningsfeltet ikke markeret for afkrydsningsfeltet "Modeller".
3) Vælg elementformular Dropdown
Direktivet om ng-modellen kan også anvendes på det valgte element og bruges til at udfylde listeelementerne på listen.
Lad os se på et eksempel på, hvordan vi kan bruge ng-modellen med den valgte inputtype.
Her vil vi have en tekstindtastningstype, der vil have navnet "Guru99", og der vil være en valgliste med 2 listeelementer over "Controller" og "Modeller".
Event Registration Guru99 Global Event
- Direktivet om ng-modellen bruges til at vedhæfte medlemsvariablen kaldet "Emner" til selekttypekontrol. Inde i vælgkontrollen, for hver af indstillingerne vedhæfter vi medlemsvariablen for Topics.option1 for den første mulighed og Topics.option2 for den anden mulighed.
- Her definerer vi vores emne-variabel, der indeholder 2 nøgleværdipar. Det første par har en værdi på "Controllers" og det andet har værdien "Modeller". Disse værdier videregives for at vælge input-tag i visningen.
Hvis koden udføres med succes, vises følgende output.
Produktion:
Fra output kan det ses, at den værdi, der er tildelt pName-variablen, er "Guru99", og vi kan se, at den valgte inputkontrol har mulighederne for "Controllers" og "Modeller".
Resumé
- Modeller i Angular JS er repræsenteret af ng-model direktivet. Det primære formål med dette direktiv er at binde udsigten til modellen. Sådan oprettes en simpel controller ved hjælp af direktiverne ng-app, ng-controller og ng-model.
- Direktivet om ng-modellen kan linkes til et "tekstområde" -indgangskontrol, og multiliniestrenge kan sendes fra controlleren til visningen.
- Direktivet om ng-modellen kan linkes til inputkontroller som tekst- og afkrydsningsfeltkontrollerne for at gøre dem mere dynamiske på kørselstidspunktet.
- Direktivet om ng-modellen kan også bruges til at udfylde en liste med valgmuligheder, der kan vises for brugeren.