Jak používat 'ng-model' v AngularJS s PŘÍKLADY

Obsah:

Anonim

Co je ng-model v AngularJs?

ng-model je směrnice v Angular.JS, která představuje modely a jejím primárním účelem je svázat „pohled“ s „modelem“.

Předpokládejme například, že jste chtěli koncovému uživateli představit jednoduchou stránku, jako je ta, která je uvedena níže a která uživatele požádá o zadání „křestního jména“ a „příjmení“ do textových polí. A pak jste chtěli zajistit, abyste ukládali informace, které uživatel zadal do vašeho datového modelu.

Pomocí direktivy ng-model můžete namapovat pole textového pole „Jméno“ a „Příjmení“ na váš datový model.

Směrnice ng-model zajistí, že data v „pohledu“ a ve vašem „modelu“ budou po celou dobu synchronizována.

V tomto výukovém programu se naučíte

  • Atribut ng-model
  • Jak používat ng-model
    • Textová oblast
    • Vstupní prvky
    • Vyberte prvek rozevíracího seznamu

Atribut ng-modelu

Jak je popsáno v úvodu této kapitoly, atribut ng-model se používá k navázání dat ve vašem modelu na zobrazení prezentované uživateli.

Atribut ng-model se používá pro,

  1. Vazba ovládacích prvků, jako je vstup, textová oblast a výběr v pohledu do modelu.
  2. Poskytněte ověřovací chování - například lze do textového pole přidat ověření, do kterého lze zadat pouze číselné znaky.
  3. Atribut ng-model udržuje stav ovládacího prvku (Podle stavu máme na mysli, že ovládací prvek a data musí být vždy synchronizována. Pokud se změní hodnota našich dat, automaticky se změní hodnota v ovládacím prvku a naopak)

Jak používat ng-model

1) Textová oblast

Značka textové oblasti se používá k definování víceřádkového ovládacího prvku pro zadávání textu. Do textové oblasti se vejde neomezený počet znaků a text se vykreslí písmem s pevnou šířkou.

Pojďme se tedy podívat na jednoduchý příklad toho, jak můžeme přidat direktivu ng-model do ovládacího prvku textové oblasti.

V tomto příkladu chceme ukázat, jak můžeme předat víceřádkový řetězec z řadiče do zobrazení a připojit tuto hodnotu k ovládacímu prvku textové oblasti.

Event Registration


Guru99 Global Event


   Topic Description:

   

Vysvětlení kódu:

  1. Směrnice ng model se používá pro připojení členské proměnné s názvem „pDescription“ ke kontrole „textarea“.

    Proměnná "pDescription" bude ve skutečnosti obsahovat text, který bude předán ovládacímu prvku textové oblasti. Také jsme zmínili 2 atributy pro ovládací prvek textarea, což jsou řádky = 4 a cols = 50. Tyto atributy byly zmíněny, abychom mohli zobrazit více řádků textu. Definováním těchto atributů bude mít textová oblast nyní 4 řádky a 50 sloupců, aby mohla zobrazit více řádků textu.

  2. Zde připojujeme členskou proměnnou k objektu oboru s názvem „pDescription“ a do proměnné vkládáme hodnotu řetězce.
  3. Všimněte si, že do řetězce vkládáme literál / n, takže text může být více řádků, když je zobrazen v textové oblasti. Literál / n rozděluje text na více řádků, aby se mohl v ovládacím prvku textarea vykreslit jako více řádků textu.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je jasně vidět, že hodnota přiřazená proměnné pDescription jako součást objektu oboru byla předána ovládacímu prvku textarea.
  • Následně se zobrazí při načtení stránky.

2) Vstupní prvky

Direktivu ng-model lze také použít na vstupní prvky, jako je textové pole, zaškrtávací políčka, přepínače atd.

Podívejme se na příklad toho, jak můžeme použít model ng s typem vstupu „textbox“ a „checkbox“.

Zde budeme mít typ zadávání textu, který bude mít název „Guru99“ a budou 2 zaškrtávací políčka, jedno bude standardně označeno a druhé nebude označeno.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Vysvětlení kódu:

  1. Směrnice ng-model se používá k připojení členské proměnné zvané „pname“ k ovládacímu prvku textu typu vstupu. Proměnná "pname" bude obsahovat text "Guru99", který bude předán ovládacímu prvku pro zadávání textu. Všimněte si, že jménu členské proměnné lze dát jakékoli jméno.
  2. Zde definujeme naše první zaškrtávací políčko „Řadiče“, které je připojeno k členské proměnné Topics.Controllers. Zaškrtávací políčko bude u této kontroly zaškrtnuto.
  3. Zde definujeme naše první zaškrtávací políčko „Modely“, které je připojeno k členské proměnné Topics.Models. Zaškrtávací políčko nebude u této kontroly zaškrtnuto.
  4. Zde připojujeme členskou proměnnou nazvanou „pName“ a vkládáme hodnotu řetězce „Guru99“.
  5. Deklarujeme proměnnou pole člena nazvanou „Témata“ a dáváme jí dvě hodnoty, první je „true“ a druhá je „false“.

    Takže když první zaškrtávací políčko získá hodnotu true, bude u tohoto ovládacího prvku označeno zaškrtávací políčko a podobně, protože druhá hodnota je false, zaškrtávací políčko u tohoto ovládacího prvku nebude označeno.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je jasně vidět, že proměnné pName je přiřazena hodnota „Guru99“
  • Protože první kontrolní hodnota je „true“, prošla, je zaškrtávací políčko označeno pro políčko „Controllers“. Podobně, protože druhá hodnota je nepravdivá, není zaškrtávací políčko označeno pro políčko „Modely“.

3) Vyberte rozevírací seznam prvků

Direktivu ng-model lze také použít na element select a použít jej k naplnění položek seznamu v seznamu select.

Podívejme se na příklad, jak můžeme použít model ng s vybraným typem vstupu.

Zde budeme mít typ zadávání textu, který bude mít název „Guru99“, a bude zde výběrový seznam se 2 položkami seznamu „Controller“ a „Models“.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Směrnice ng-model se používá k připojení členské proměnné s názvem „Témata“ k ovládacímu prvku výběru typu. Uvnitř ovládacího prvku select pro každou z možností připojujeme členskou proměnnou Topics.option1 pro první možnost a Topics.option2 pro druhou možnost.
  2. Zde definujeme naši proměnnou pole Témata, která obsahuje 2 páry klíč – hodnota. První pár má hodnotu „Řadiče“ a druhý má hodnotu „Modely“. Tyto hodnoty budou předány k výběru vstupní značky v zobrazení.

    Pokud je kód úspěšně proveden, zobrazí se následující výstup.

Výstup:

Z výstupu je vidět, že hodnota přiřazená proměnné pName je „Guru99“ a vidíme, že ovládací prvek select input má možnosti „Controllers“ a „Models“.

souhrn

  • Modely v Angular JS jsou reprezentovány direktivou ng-model. Primárním účelem této směrnice je svázat pohled s modelem. Jak vytvořit jednoduchý řadič pomocí směrnic ng-app, ng-controller a ng-model.
  • Direktivu ng-model lze propojit se vstupním ovládacím prvkem "textové oblasti" a víceřádkové řetězce lze předat z řadiče do zobrazení.
  • Direktivu ng-model lze propojit se vstupními ovládacími prvky, jako jsou ovládací prvky textu a zaškrtávacího políčka, aby byly za běhu dynamičtější.
  • Direktivu ng-model lze také použít k naplnění seznamu výběrů možnostmi, které se mohou uživateli zobrazit.