AngularJS - Entrées dans les formulaires

Gestion des données de formulaire

Dans les applications Web, le moyen le plus naturel d'obtenir des données utilisateur consiste à utiliser des formulaires. Avec eux, nous pouvons créer des éléments qui capturent du texte ou de simples confirmations telles que des cases à cocher, mais tout cela peut être traduit en données utilisateur. Avec eux, nous pouvons effectuer différents traitements.
Dans AngularJS Travailler avec ces entrées de données est très simple, car de par la façon dont la bibliothèque a été conçue, nous pouvons transformer une partie de ces données que nous recevons en actions dans notre application, soit pour faire des calculs, soit pour définir son comportement.
Dans cette section, nous verrons un peu plus sur la façon de gérer la saisie dans les formulaires à l'aide d'AngularJS.
Comment ça marche?La façon dont nous pouvons faire l'union entre les éléments d'entrée et notre logique dans AngularJS est très simple, nous devons utiliser la propriété ng-modèle et tout prendra une sorte de relation, de sorte que la valeur de ce que nous entrons par la forme peut être manipulée dans AngularJS, cela peut s'appliquer à saisir du texte, des boutons radio, des cases à cocher, etc..
Voyons ci-dessous un petit exemple de ce que nous expliquons :

Ce qui se passe ici, c'est que dans le cadre de Notre contrôleur nous pouvons manipuler ce que fait l'utilisateur dans le case à cocher du marqueur, alors si l'utilisateur le marque, nous recevrons immédiatement marqueur comme vrai et si vous le décochez, nous aurons la réponse opposée.
On peut aller un peu plus loin et on peut s'installer Notre contrôleur Quoi marqueur est marqué par défaut, puis lorsque l'utilisateur voit la page pour la première fois, la case à cocher est cochée.
Ajouter des actions
Mais non seulement en capturant les données, nous devons rester, nous pouvons et nous devons inclure des actions une fois que nous recevons les intrants, dans AngularJS Nous pouvons appeler des fonctions et des méthodes qui sont exécutées dans un événement de notre élément d'entrée, par exemple nous allons faire une petite calculatrice qui prend l'estimation d'investissement pour faire un engagement, ce que nous ferons est de multiplier la valeur reçue par 10, disons voir:
1- Nous devons d'abord établir les éléments HTML que nous allons utiliser, comme dans l'exemple précédent nous allons créer un contrôleur et le l'entrée va faire partie de notre modèle:

AGRANDIR

2- Nous voyons que nous avons introduit une nouvelle propriété ng-changer et nous avons assigné l'appel à une fonction appelée calculInversion () Cela signifie que chaque fois que notre champ de saisie change, la fonction sera appelée, comme nous pouvons le voir, c'est quelque chose de très simple.
3- Nous allons maintenant construire le code avec AngularJS qui donnera vie à ce que nous avons vu :

4- Nous construisons le contrôleur approprié, puis nous indiquons une valeur initiale pour le modèle, dans ce cas nous l'assimilons à 0, cela inclut les deux éléments à la fois Initial estimé Quoi nécessaire, puis on crée la fonction calculInversion () Nous voyons que nous le faisons dans la soi-disant portée de notre contrôleur, de cette manière, il est associé à notre élément. Avec cela, notre application devrait fonctionner à un niveau de base.
Bien sûr cet exemple manque plusieurs validations et ne prend en compte que lorsque l'utilisateur modifie la valeur du texte saisi, mais il sert d'introduction pour inclure des actions dans nos applications écrites avec AngularJS.
Précédentpage 1 sur 2Prochain