Mi az ng-modell az AngularJ-kben?
Az ng-model az Angular.JS direktívája, amely modelleket képvisel, és elsődleges célja, hogy a "nézetet" a "modellhez" kösse.
Tegyük fel például, hogy egy olyan egyszerű oldalt szeretett volna bemutatni a végfelhasználónak, mint az alább látható, amely arra kéri a felhasználót, hogy írja be a "Keresztnév" és a "Vezetéknév" szövegmezőkbe. Ezután meg akarta győződni arról, hogy tárolja azokat az információkat, amelyeket a felhasználó beírt az adatmodelljébe.
Az ng-model direktívával leképezheti a "Keresztnév" és a "Vezetéknév" szövegdoboz mezőket az adatmodelljére.
Az ng-model irányelv biztosítja, hogy a "nézetben" és a "modelljében" szereplő adatok szinkronban maradjanak egész idő alatt.
Ebben az oktatóanyagban megtanulja-
- Az ng-model attribútum
- Az ng-model használata
- Szövegterület
- Bemeneti elemek
- Válassza ki az elemet a legördülő menüből
Az ng-model attribútum
Amint az a fejezet bevezetőjében szerepel, az ng-model attribútumot arra használjuk, hogy a modellben lévő adatokat a felhasználónak bemutatott nézethez kösse.
Az ng-model attribútumot használjuk,
- A kötés vezérli például a bevitelt, a szöveg területét, és kiválasztja a nézetben a modellbe.
- Adjon meg egy érvényesítési magatartást - például egy validáció hozzáadható egy szövegmezőhöz, amelybe csak numerikus karaktereket lehet beírni.
- Az ng-model attribútum fenntartja a vezérlés állapotát (államonként azt értjük, hogy a vezérlőt és az adatokat mindig szinkronban kell tartani. Ha az adataink értéke megváltozik, az automatikusan megváltoztatja a vezérlő értékét oda-vissza)
Az ng-model használata
1) Szövegterület
A szöveges terület címkéje egy többsoros szövegbeviteli vezérlő meghatározására szolgál. A szövegterület korlátlan számú karaktert tartalmazhat, és a szöveg rögzített szélességű betűtípusban jelenik meg.
Tehát most nézzünk meg egy egyszerű példát arra, hogyan adhatjuk hozzá az ng-model irányelvet a szövegterület-vezérléshez.
Ebben a példában azt szeretnénk bemutatni, hogyan adhatunk át egy többsoros karakterláncot a vezérlőtől a nézethez, és ezt az értéket csatolhatjuk a szövegterület-vezérlőhöz.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Az ng-model direktíva a "pDescription" nevű tagváltozó csatolására szolgál a "textarea" vezérlőhöz.
A "pDescription" változó valójában tartalmazza a szöveget, amelyet továbbad a szövegterület vezérlőjének. A textarea vezérléshez 2 attribútumot is említettünk, amely a sor = 4 és a cols = 50. Ezeket az attribútumokat azért említettük, hogy több sornyi szöveget tudjunk megjeleníteni. Ezen attribútumok definiálásával a textarea most 4 sorból és 50 oszlopból áll, így több sornyi szöveget tud megjeleníteni.
- Itt csatoljuk a tag változót a "pDescription" nevű hatókörobjektumhoz, és egy string értéket adunk a változóhoz.
- Ne feledje, hogy az / n literált a karakterláncba helyezzük, hogy a szöveg többsoros lehessen, amikor a szövegterületen megjelenik. Az / n literal több szövegre osztja a szöveget, így több szövegsorként képes megjeleníteni a textarea vezérlőben.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Jól látható, hogy a pDescription változóhoz a skála objektum részeként hozzárendelt értéket átadták a textarea vezérlőnek.
- Ezt követően az oldal betöltésekor megjelent.
2) Bemeneti elemek
Az ng-model direktíva alkalmazható olyan bemeneti elemekre is, mint a szövegdoboz, jelölőnégyzetek, választógombok stb.
Nézzünk meg egy példát arra, hogyan használhatjuk az ng-modellt a "textbox" és a "checkbox" beviteltípussal.
Itt lesz egy szövegbeviteli típusunk, amelynek a neve "Guru99" lesz, és 2 jelölőnégyzet lesz, az egyiket alapértelmezés szerint, a másikat nem.
Event Registration Guru99 Global Event
Kód Magyarázat:
- Az ng-model direktívával a "pname" nevű tagváltozót csatolhatjuk a bemeneti típusú szövegvezérlőhöz. A "pname" változó tartalmazza a "Guru99" szövegét, amelyet továbbít a szövegbeviteli vezérlőnek. Ne feledje, hogy a tagváltozó nevének bármilyen név adható.
- Itt definiáljuk az első "Vezérlők" jelölőnégyzetünket, amely a Topics.Controllers tagváltozóhoz van csatolva. A jelölőnégyzet be lesz jelölve ehhez az ellenőrző vezérlőhöz.
- Itt definiáljuk az első "Models" jelölőnégyzetet, amely a Topics.Models tagváltozóhoz van csatolva. A jelölőnégyzet nem lesz jelölve ehhez az ellenőrző vezérlőhöz.
- Itt csatoljuk a "pName" nevű tagváltozót, és a "Guru99" karakterláncot adjuk meg.
- Kijelentjük a "Témák" nevű tag tömb változót, és két értéket adunk neki: az első "igaz", a második "hamis".
Tehát, amikor az első jelölőnégyzet megkapja az igaz értéket, akkor a jelölőnégyzet be lesz jelölve ehhez a vezérlőhöz, és mivel a második érték hamis, a jelölőnégyzet sem lesz jelölve ennél a vezérlőnél.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
- Jól látható, hogy a pName változóhoz rendelt érték "Guru99"
- Mivel az első ellenőrzési érték "igaz", átment, a jelölőnégyzet be van jelölve a "Vezérlők" jelölőnégyzetbe. Hasonlóképpen, mivel a második érték hamis, a jelölőnégyzet nincs bejelölve a "Modellek" jelölőnégyzetnél.
3) Válassza ki az elemet a legördülő menüből
Az ng-model direktíva alkalmazható a select elemre is, és felhasználható a listan szereplő elemek feltöltésére a select listában.
Nézzünk meg egy példát arra, hogyan használhatjuk az ng-modellt a kiválasztott bemeneti típussal.
Itt lesz egy szövegbeviteli típusunk, amelynek a neve "Guru99" lesz, és lesz egy kiválasztási lista, amely két listaelemet tartalmaz: "Vezérlő" és "Modellek".
Event Registration Guru99 Global Event
- Az ng-model direktíva a "Témák" nevű tagváltozó csatolására szolgál a kiválasztott típusvezérlőhöz. A select vezérlő belsejében az egyes opciókhoz csatoljuk a Topics.option1 tagváltozót az első opcióhoz és a Topics.option2 a második opcióhoz.
- Itt definiáljuk a Témák tömb változót, amely 2 kulcs-érték párot tartalmaz. Az első pár értéke "Vezérlők", a második pedig a "Modellek" értéke. Ezeket az értékeket továbbítjuk a nézet bemeneti címkéjének kiválasztásához.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg.
Kimenet:
A kimenetből látható, hogy a pName változóhoz rendelt érték "Guru99", és láthatjuk, hogy a kiválasztott bemeneti vezérlésnek a "Vezérlők" és a "Modellek" lehetőségei vannak.
Összegzés
- Az Angular JS modelleket az ng-modell irányelv képviseli. Ezen irányelv elsődleges célja, hogy a nézetet a modellhez kösse. Hogyan lehet egyszerű vezérlőt felépíteni az ng-app, ng-controller és ng-model irányelvek használatával.
- Az ng-model direktíva összekapcsolható egy "szövegterület" bemeneti vezérléssel, és többsoros karakterláncok továbbíthatók a vezérlőből a nézetbe.
- Az ng-model irányelv összekapcsolható olyan bemeneti vezérlőkkel, mint a szöveges és a jelölőnégyzet-vezérlők, hogy dinamikusabbá váljanak a futás közben.
- Az ng-model direktíva arra is felhasználható, hogy egy kiválasztott listát feltöltsön a felhasználó számára megjeleníthető opciókkal.