AngularJS - Входове във формуляри

Управление на данни за формуляри

В уеб приложенията най -естественият начин за получаване на потребителски данни е чрез формуляри, с тях можем да създаваме елементи, които улавят текст или прости потвърждения като квадратчета за отметка, но всичко това може да се преведе като потребителски данни, с тях можем да извършим различна обработка.
В AngularJS Работата с тези входни данни е много проста, тъй като поради начина, по който е проектирана библиотеката, можем да трансформираме част от тези данни, които получаваме, в действия в нашето приложение, или да правим изчисления, или да дефинираме нейното поведение.
В този раздел ще видим малко повече за това как да боравим с въвеждане във формуляри с помощта на AngularJS.
Как работи?Начинът, по който можем да направим обединението между входните елементи и нашата логика в AngularJS е много проста, трябва да използваме имота ng-модел и всичко ще има някаква връзка, така че стойността на това, което въвеждаме чрез форма, може да бъде манипулирана AngularJS, това може да се отнася за въвеждане на текст, бутони за избор, квадратче за отметка и т.н..
Нека да видим по -долу малък пример за това, което обясняваме:

Това, което се случва тук, е, че в обхвата на Нашият контролер можем да манипулираме това, което потребителят прави в квадратче за маркиране, тогава ако потребителят го отбележи, веднага ще получим маркер като вярно и ако премахнете отметката, ще имаме обратния отговор.
Можем да отидем малко по -далеч и можем да се включим Нашият контролер че маркер е маркиран по подразбиране, тогава когато потребителят види страницата за първи път, квадратчето за отметка ще бъде маркирано.
Добавяне на действия
Но не само при улавяне на данните, които трябва да останем, ние можем и трябва да включим действия, след като получим входящите данни, в AngularJS Можем да извикаме функции и методи, които се изпълняват в случай на нашия входен елемент, например ще направим малък калкулатор, който взема прогнозата за инвестицията, за да направи предприятие, това, което ще направим, е да умножим получената стойност с 10, нека виж:
1- Първо трябва да установим HTML елементите, които ще използваме, както в предишния пример ще създадем контролер и входът ще бъде част от нашия модел:

Увеличете

2- Виждаме, че сме въвели нов имот ng-промяна и сме присвоили повикването на функция, наречена calculoInversion () Това означава, че всеки път, когато нашето поле за въвеждане се промени, функцията ще бъде извикана, както виждаме, е нещо много просто.
3- Сега ще изградим кода с AngularJS това ще даде живот на това, което видяхме:

4- Изграждаме подходящ контролер, след това посочваме начална стойност за модела, в този случай го приравняваме на 0, това включва и двата елемента и двата Приблизително първоначално Какво необходимо, след това създаваме функцията calculoInversion () Виждаме, че го правим в така наречения обхват на нашия контролер, по този начин той е свързан с нашия елемент. С това нашето приложение трябва да работи на основно ниво.
Разбира се, в този пример липсват няколко проверки и се взема предвид само когато потребителят промени стойността на въведения текст, но той служи като въведение за включване на действия в нашите приложения, написани с AngularJS.
Предишнистраница 1 от 2Следващия