Vad är ng-modell i AngularJs?
ng-modellen är ett direktiv i Angular.JS som representerar modeller och dess primära syfte är att binda "vyn" till "modellen".
Antag till exempel att du ville presentera en enkel sida för slutanvändaren som den som visas nedan som ber användaren att ange "Förnamn" och "Efternamn" i textrutor. Och sedan ville du se till att du lagrar den information som användaren har angett i din datamodell.
Du kan använda ng-modelldirektivet för att mappa textrutans fält för "Förnamn" och "Efternamn" till din datamodell.
Direktivet om ng-modeller kommer att säkerställa att data i "vyn" och din "modell" hålls synkroniserade hela tiden.
I den här handledningen lär du dig-
- Attributet ng-model
- Hur man använder ng-modell
- Textområde
- Ingångselement
- Välj element från rullgardinsmenyn
Attributet ng-model
Som diskuterats i inledningen till detta kapitel används attributet ng-model för att binda data i din modell till den vy som presenteras för användaren.
Attributet ng-model används för,
- Bindande kontroller som inmatning, textområde och väljer i vyn i modellen.
- Ge ett valideringsbeteende - till exempel kan en validering läggas till i en textruta så att endast numeriska tecken kan matas in i textrutan.
- Attributet ng-model bibehåller kontrollens tillstånd (Med tillstånd menar vi att kontrollen och data alltid måste hållas synkroniserade. Om värdet på våra data ändras kommer det automatiskt att ändra värdet i kontrollen och vice versa)
Hur man använder ng-modell
1) Textområde
Textområdetiketten används för att definiera en textinmatningskontroll med flera rader. Textområdet kan innehålla ett obegränsat antal tecken och texten återges i ett teckensnitt med fast bredd.
Så nu ska vi titta på ett enkelt exempel på hur vi kan lägga till ng-modelldirektivet till en textområdekontroll.
I det här exemplet vill vi visa hur vi kan skicka en multilinjesträng från styrenheten till vyn och bifoga det värdet till textområdekontrollen.
Event Registration Guru99 Global Event
Kodförklaring:
- Det direktiv ng-modellen används för att fästa medlemmen variabel som heter "pDescription" till "textarea" kontroll.
Variabeln "pDescription" kommer faktiskt att innehålla texten som skickas vidare till textområdekontrollen. Vi har också nämnt två attribut för textarea-kontrollen som är rader = 4 och cols = 50. Dessa attribut har nämnts så att vi kan visa flera textrader. Genom att definiera dessa attribut kommer textområdet nu att ha 4 rader och 50 kolumner så att det kan visa flera textrader.
- Här bifogar vi medlemsvariabeln till omfattningsobjektet som kallas "pDescription" och lägger ett strängvärde till variabeln.
- Observera att vi sätter bokstaven / n i strängen så att texten kan bestå av flera rader när den visas i textområdet. Bokstaven / n delar upp texten i flera rader så att den kan återges i textområdet som flera textrader.
Om koden körs framgångsrikt visas följande utdata när du kör koden i webbläsaren.
Produktion:
Från produktionen
- Det kan tydligt ses att det värde som tilldelats pDescription-variabeln som en del av scope-objektet skickades till textarea-kontrollen.
- Därefter har den visats när sidan laddas.
2) Ingångselement
Direktivet om ng-modellen kan också tillämpas på inmatningselementen som textrutan, kryssrutor, alternativknappar etc.
Låt oss titta på ett exempel på hur vi kan använda ng-modellen med inmatningstypen "textbox" och "checkbox".
Här har vi en textinmatningstyp som kommer att ha namnet "Guru99" och det kommer att finnas två kryssrutor, en som kommer att markeras som standard och den andra kommer inte att markeras.
Event Registration Guru99 Global Event
Kodförklaring:
- Det direktiv ng-modellen används för att fästa medlemmen variabel som heter "pname" till ingångstypen textkontroll. Variabeln "pname" innehåller texten i "Guru99" som kommer att skickas vidare till textinmatningskontrollen. Observera att valfritt namn kan ges till namnet på medlemsvariabeln.
- Här definierar vi vår första kryssruta "Controllers" som är kopplad till medlemsvariabeln Topics.Controllers. Kryssrutan markeras för denna kontrollkontroll.
- Här definierar vi vår första kryssruta "Modeller" som är kopplad till medlemsvariabeln Topics.Models. Kryssrutan kommer inte att markeras för denna kontrollkontroll.
- Här bifogar vi medlemsvariabeln "pName" och sätter ett strängvärde "Guru99".
- Vi förklarar en medlemsmatrisvariabel som heter "Ämnen" och ger den två värden, den första är "sant" och den andra är "falsk".
Så när den första kryssrutan får värdet sant kommer kryssrutan att markeras för den här kontrollen, och eftersom det andra värdet är falskt kommer inte kryssrutan att markeras för den här kontrollen.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Från produktionen,
- Det kan tydligt ses att värdet som tilldelats pName-variabeln är "Guru99"
- Eftersom det första kryssvärdet är "sant" passerade det kryssrutan för "Kontroller" kryssrutan. Eftersom det andra värdet är falskt är inte kryssrutan markerad för kryssrutan "Modeller".
3) Välj element från rullgardinsmenyn
Direktivet om ng-modellen kan också tillämpas på select-elementet och användas för att fylla i listobjekten i select-listan.
Låt oss titta på ett exempel på hur vi kan använda ng-modellen med vald ingångstyp.
Här kommer vi att ha en textinmatningstyp som kommer att ha namnet "Guru99" och det kommer att finnas en utvald lista med två listobjekt av "Controller" och "Modeller".
Event Registration Guru99 Global Event
- Det direktiv ng-modellen används för att fästa medlemmen variabel som heter "Ämnen" till Välj typ kontroll. Inuti väljarkontrollen, för vart och ett av alternativen, bifogar vi medlemsvariabeln Topics.option1 för det första alternativet och Topics.option2 för det andra alternativet.
- Här definierar vi vår ämnesmatrisvariabel som innehåller två nyckel-värdepar. Det första paret har värdet "Controllers" och det andra har värdet "Modeller". Dessa värden skickas för att välja ingångstagg i vyn.
Om koden körs framgångsrikt visas följande utdata.
Produktion:
Från utgången kan det ses att värdet som tilldelats pName-variabeln är "Guru99" och vi kan se att vald ingångskontroll har alternativen "Controllers" och "Models".
Sammanfattning
- Modeller i Angular JS representeras av ng-modelldirektivet. Det primära syftet med detta direktiv är att binda vyn till modellen. Hur man bygger en enkel styrenhet med direktiven ng-app, ng-controller och ng-modell.
- Direktivet om ng-modellen kan länkas till en "textområde" -ingångskontroll och flerlinjiga strängar kan skickas från styrenheten till vyn.
- Direktivet om ng-modellen kan länkas till ingångskontroller som texten och kryssrutan för att göra dem mer dynamiska vid körning.
- Direktivet om ng-modellen kan också användas för att fylla i en vald lista med alternativ som kan visas för användaren.