AngularJS - Dane wejściowe w formularzach

Zarządzanie danymi formularza

W aplikacjach webowych najbardziej naturalnym sposobem pozyskiwania danych użytkownika są formularze, za ich pomocą możemy tworzyć elementy przechwytujące tekst lub proste potwierdzenia typu checkboxy, ale wszystko to można przetłumaczyć jako dane użytkownika, za ich pomocą możemy dokonać innego przetwarzania.
w AngularJS Praca z tymi danymi wejściowymi jest bardzo prosta, ponieważ ze względu na sposób, w jaki biblioteka została zaprojektowana, część otrzymanych danych możemy przekształcić w akcje w naszej aplikacji, aby wykonać obliczenia lub zdefiniować jej zachowanie.
W tej sekcji zobaczymy trochę więcej o tym, jak obsługiwać dane wejściowe w formularzach za pomocą AngularJS.
Jak to działa?Sposób, w jaki możemy utworzyć połączenie między elementami wejściowymi a naszą logiką w AngularJS jest bardzo prosty, musimy skorzystać z właściwości ng-model a wszystko nabierze pewnego rodzaju relacji, dzięki czemu można manipulować wartością tego, co wprowadzamy formą AngularJS, może to dotyczyć tekst wejściowy, przyciski radiowe, pole wyboru itp..
Zobaczmy poniżej mały przykład tego, co wyjaśniamy:

To, co się tutaj dzieje, to to, że w zakresie Nasz kontroler możemy manipulować tym, co robi użytkownik w pole wyboru znacznika, to jeśli użytkownik to zaznaczy, natychmiast otrzymamy znacznik jako prawda, a jeśli ją odznaczysz, otrzymamy odpowiedź odwrotną.
Możemy iść trochę dalej i możemy się ustawić Nasz kontroler że znacznik jest zaznaczone domyślnie, wtedy gdy użytkownik zobaczy stronę po raz pierwszy, checkbox zostanie zaznaczony.
Dodaj działania
Ale nie tylko w przechwytywaniu danych musimy pozostać, możemy i musimy uwzględnić działania po otrzymaniu danych wejściowych, w AngularJS Możemy wywoływać funkcje i metody, które są wykonywane w przypadku naszego elementu wejściowego, na przykład zrobimy mały kalkulator, który pobiera oszacowanie inwestycji, aby wykonać przedsięwzięcie, to co zrobimy to pomnożenie otrzymanej wartości przez 10, powiedzmy zobaczyć:
1- Najpierw musimy ustalić elementy HTML, których będziemy używać, tak jak w poprzednim przykładzie stworzymy kontroler i dane wejściowe będą częścią naszego modelu:

POWIĘKSZAĆ

2- Widzimy, że wprowadziliśmy nową właściwość ng-zmiana i przypisaliśmy wywołanie do funkcji o nazwie calculoInwersja () Oznacza to, że za każdym razem, gdy zmieni się nasze pole wejściowe, funkcja zostanie wywołana, jak widzimy, jest to bardzo proste.
3- Teraz zbudujemy kod za pomocą AngularJS które ożywią to, co widzieliśmy:

4- Budujemy odpowiedni sterownik, następnie wskazujemy wartość początkową dla modelu, w tym przypadku przyrównujemy ją do 0, obejmuje to oba elementy zarówno Szacowana inicjał Co niezbędny, następnie tworzymy funkcję calculoInwersja () Widzimy, że robimy to w tzw. zakresie naszego kontrolera, w ten sposób jest on powiązany z naszym żywiołem. Dzięki temu nasza aplikacja powinna działać na podstawowym poziomie.
Oczywiście w tym przykładzie brakuje kilku walidacji i uwzględnia tylko zmianę wartości tekstu wejściowego przez użytkownika, ale służy on jako wstęp do uwzględnienia akcji w naszych aplikacjach napisanych za pomocą AngularJS.
PoprzedniStrona 1 z 2Następny