AngularJS - vstupy ve formulářích

Správa dat formuláře

Ve webových aplikacích je nejpřirozenějším způsobem získávání uživatelských dat prostřednictvím formulářů, pomocí kterých můžeme vytvářet prvky, které zachycují text nebo jednoduchá potvrzení, například zaškrtávací políčka, ale to vše lze přeložit jako uživatelská data, s nimiž můžeme provádět různé zpracování.
v AngularJS Práce s těmito datovými vstupy je velmi jednoduchá, protože vzhledem ke způsobu, jakým byla knihovna navržena, můžeme část těchto dat, která obdržíme, transformovat do akcí v naší aplikaci, a to buď pro provádění výpočtů, nebo pro definování jejího chování.
V této části uvidíme trochu více o tom, jak zpracovat vstup ve formulářích pomocí AngularJS.
Jak to funguje?Způsob, jakým můžeme vytvořit sjednocení mezi vstupními prvky a naší logikou AngularJS je velmi jednoduchá, musíme použít vlastnost ng model a všechno bude vyžadovat jakýsi vztah, takže s hodnotou toho, co zadáme formou, lze manipulovat AngularJS, to může platit pro vstupní text, přepínače, zaškrtávací políčko atd.
Podívejme se níže na malý příklad toho, co vysvětlujeme:

Co se zde stane, je, že v rozsahu Náš správce můžeme manipulovat s tím, co uživatel dělá v zaškrtávací políčko značky, pak pokud to uživatel označí, okamžitě obdržíme popisovač jako pravdivé a pokud jej odškrtnete, budeme mít opačnou odpověď.
Můžeme jít ještě o kousek dál a můžeme vstoupit Náš správce že popisovač je ve výchozím nastavení označeno, pak když uživatel uvidí stránku poprvé, bude zaškrtávací políčko označeno.
Přidat akce
Ale nejen při získávání dat, u kterých musíme zůstat, můžeme a musíme zahrnout akce, jakmile obdržíme vstupy, v AngularJS Můžeme zavolat funkce a metody, které jsou provedeny v případě našeho vstupního prvku, například uděláme malou kalkulačku, která vezme odhad investice k vytvoření závazku, co uděláme, vynásobíme přijatou hodnotu 10, pojďme vidět:
1- Nejprve musíme vytvořit prvky HTML, které budeme používat, stejně jako v předchozím příkladu vytvoříme ovladač a vstup bude součástí našeho modelu:

ZVĚTŠIT

2- Vidíme, že jsme zavedli novou vlastnost ng-změna a přiřadili jsme volání funkci s názvem calculoInversion () To znamená, že pokaždé, když se změní naše vstupní pole, bude funkce volána, protože vidíme, že je to něco velmi jednoduchého.
3- Nyní vytvoříme kód pomocí AngularJS to oživí to, co jsme viděli:

4- Sestavíme příslušný řadič, poté označíme počáteční hodnotu pro model, v tomto případě jej přirovnáme k 0, to zahrnuje oba prvky oba Odhadovaná počáteční Co nutné, pak vytvoříme funkci calculoInversion () Vidíme, že to děláme v takzvaném rozsahu našeho ovladače, tímto způsobem je to spojeno s naším prvkem. Díky tomu by naše aplikace měla fungovat na základní úrovni.
Tento příklad samozřejmě postrádá několik ověření a bere v úvahu pouze tehdy, když uživatel změní hodnotu vstupního textu, ale slouží jako úvod k zahrnutí akcí do našich aplikací napsaných pomocí AngularJS.
Předchozístrana 1 ze 2další