Čo je model ng v AngularJs?
ng-model je smernica v Angular.JS, ktorá predstavuje modely a jej primárnym účelom je viazať „pohľad“ na „model“.
Predpokladajme napríklad, že chcete koncovému používateľovi predstaviť jednoduchú stránku, ako je tá, ktorá je uvedená nižšie, ktorá žiada používateľa, aby do textových polí zadal meno a priezvisko. A potom ste sa chceli uistiť, že ukladáte informácie, ktoré používateľ zadal do vášho dátového modelu.
Direktívu ng-model môžete použiť na mapovanie polí textového poľa „Meno“ a „Priezvisko“ na váš dátový model.
Direktíva ng-model zabezpečí, že údaje v „zobrazení“ a vo vašom „modeli“ sa budú neustále synchronizovať.
V tomto návode sa naučíte
- Atribút ng-model
- Ako používať model ng
- Oblasť textu
- Vstupné prvky
- Vyberte formulár prvku Rozbaľovací zoznam
Atribút modelu ng
Ako je uvedené v úvode tejto kapitoly, atribút ng-model sa používa na vytvorenie väzby údajov vo vašom modeli s pohľadom zobrazeným používateľovi.
Atribút ng-model sa používa pre,
- Viazanie ovládacích prvkov, ako je vstup, textová oblasť a výber v pohľade do modelu.
- Poskytnite overovacie správanie - napríklad do textového poľa je možné pridať overenie, do ktorého je možné zadať iba číselné znaky.
- Atribút ng-model udržiava stav kontroly (Podľa stavu znamená, že kontrola a údaje musia byť vždy synchronizované. Ak sa zmení hodnota našich údajov, automaticky sa zmení hodnota v ovládacom prvku a naopak)
Ako používať model ng
1) Oblasť textu
Značka textovej oblasti sa používa na definovanie viacriadkového ovládacieho prvku vstupu textu. Textová oblasť môže obsahovať neobmedzený počet znakov a text sa vykreslí písmom s pevnou šírkou.
Poďme sa teraz pozrieť na jednoduchý príklad toho, ako môžeme pridať smernicu ng-model do ovládacieho prvku textovej oblasti.
V tomto príklade chceme ukázať, ako môžeme odovzdať viacriadkový reťazec z ovládača do zobrazenia a pripojiť túto hodnotu k ovládaciemu prvku textovej oblasti.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Smernica ng model sa používa pre pripojenie členské premenné s názvom "pDescription" na kontrolu "textarea".
Premenná „pDescription“ bude skutočne obsahovať text, ktorý sa odovzdá ovládaciemu prvku textovej oblasti. Tiež sme spomenuli 2 atribúty pre ovládací prvok textarea, čo sú riadky = 4 a cols = 50. Tieto atribúty boli spomenuté, aby sme mohli zobraziť viac riadkov textu. Definovaním týchto atribútov bude mať textová oblasť teraz 4 riadky a 50 stĺpcov, aby mohla zobrazovať viac riadkov textu.
- Tu pripájame členskú premennú k objektu rozsahu s názvom „pDescription“ a do premennej dávame hodnotu reťazca.
- Upozorňujeme, že do reťazca vkladáme literál / n, aby text mohol mať viac riadkov, keď sa zobrazuje v textovej oblasti. Literál / n rozdelí text na viac riadkov, aby sa mohol v ovládacom prvku textarea vykresliť ako viac riadkov textu.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Je jasne vidieť, že hodnota priradená premennej pDescription ako súčasť objektu rozsahu bola odovzdaná ovládaciemu prvku textarea.
- Následne sa zobrazila pri načítaní stránky.
2) Vstupné prvky
Direktívu ng-model možno použiť aj na vstupné prvky, ako sú textové pole, začiarkavacie políčka, prepínače atď.
Pozrime sa na príklad toho, ako môžeme použiť model ng s typom vstupu „textbox“ a „checkbox“.
Tu budeme mať typ zadávania textu, ktorý bude mať názov „Guru99“ a budú tam dve začiarkavacie políčka, jedno bude štandardne označené a druhé nebude označené.
Event Registration Guru99 Global Event
Vysvetlenie kódu:
- Smernica ng model sa používa pre pripojenie členské premenné s názvom "pname" ku kontrole textu typu vstupu. Premenná „pname“ bude obsahovať text „Guru99“, ktorý sa odovzdá do ovládacieho prvku zadávania textu. Upozorňujeme, že názvu členskej premennej je možné dať akékoľvek meno.
- Tu definujeme naše prvé začiarkavacie políčko „Ovládače“, ktoré je pripojené k členskej premennej Topics.Controllers. Zaškrtávacie políčko bude označené pre tento ovládací prvok kontroly.
- Tu definujeme naše prvé začiarkavacie políčko „Modely“, ktoré je pripojené k členskej premennej Topics.Models. Zaškrtávacie políčko nebude označené pre tento ovládací prvok kontroly.
- Tu pripájame členskú premennú nazvanú „pName“ a uvádzame hodnotu reťazca „Guru99“.
- Deklarujeme premennú poľa člena s názvom „Témy“ a dávame jej dve hodnoty, prvá je „true“ a druhá je „false“.
Keď teda prvé začiarkavacie políčko získa hodnotu true, bude pre tento ovládací prvok označené začiarkavacie políčko a rovnako, pretože druhá hodnota je false, začiarkavacie políčko pre tento ovládací prvok nebude označené.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Z výstupu
- Je jasne vidieť, že premennej pName je priradená hodnota „Guru99“
- Pretože prvá kontrolná hodnota je „true“, prešla, začiarkavacie políčko je začiarknuté pre políčko „Controllers“. Pretože druhá hodnota je nepravdivá, začiarkavacie políčko nie je začiarknuté pre políčko „Modely“.
3) Vyberte rozbaľovaciu ponuku prvku
Direktívu ng-model je možné použiť aj na prvok select a použiť ho na vyplnenie položiek zoznamu v zozname select.
Pozrime sa na príklad toho, ako môžeme použiť model ng s typom vstupu select.
Tu budeme mať typ zadávania textu, ktorý bude mať názov „Guru99“ a bude tu výberový zoznam s 2 položkami zoznamu „Ovládač“ a „Modely“.
Event Registration Guru99 Global Event
- Smernica ng model sa používa pre pripojenie členské premenné s názvom "Témy" do vybranej kontrolou typu. Vo vnútri ovládacieho prvku select pre každú z možností pripájame členskú premennú Topics.option1 pre prvú možnosť a Topics.option2 pre druhú možnosť.
- Tu definujeme našu premennú poľa Témy, ktorá obsahuje 2 páry kľúč - hodnota. Prvý pár má hodnotu „Ovládače“ a druhý má hodnotu „Modely“. Tieto hodnoty sa odovzdajú na výber vstupnej značky v zobrazení.
Ak sa kód úspešne vykoná, zobrazí sa nasledujúci výstup.
Výkon:
Z výstupu vidno, že premennej pName je priradená hodnota „Guru99“ a vidíme, že výber vstupného riadenia má možnosti „Controllers“ a „Models“.
Zhrnutie
- Modely v Angular JS sú reprezentované smernicou ng-model. Primárnym účelom tejto smernice je zviazať pohľad s modelom. Ako vytvoriť jednoduchý radič pomocou smerníc ng-app, ng-controller a ng-model.
- Direktívu ng-model je možné prepojiť s riadením vstupu „textová oblasť“ a z riadiacej jednotky do zobrazenia sa dajú odovzdať viacriadkové reťazce.
- Direktívu ng-model je možné prepojiť so vstupnými ovládacími prvkami, ako sú ovládacie prvky textu a začiarkavacieho políčka, aby boli dynamickejšie za behu.
- Direktívu ng-model možno použiť aj na vyplnenie výberového zoznamu s možnosťami, ktoré sa môžu používateľovi zobraziť.