Apprenez les formulaires AngularJS dans Practice_AngularJS

Le formulaire est le composant le plus couramment utilisé. Dans Angular.js, peu de fonctionnalités spéciales sont ajoutées au formulaire seul. Cependant, en utilisant les caractéristiques du framework Angular.js lui-même, le formulaire peut être présenté de manière plus conviviale. Ce qui suit présentera comment plusieurs fonctions couramment utilisées sont intelligemment implémentées dans Angular.

1. Mettre à jour les données de sortie en temps réel en fonction des données du domaine d'entrée

Le code suivant implémente un formulaire de calcul simple, qui peut traiter les données saisies par l'utilisateur et les afficher dans le champ de sortie du formulaire en temps réel :

<div ng-app="" ng-init="quantity=1;price=5"> 
数量： <input type="number" ng-model="quantity"> 
价格： <input type="number" ng-model="price"> 
<p><b>总价：</b> {{ quantity * price }}</p> 
</div> 

En définissant deux modèles ng, les données saisies par l'utilisateur sont surveillées en temps réel, et {{}} est utilisé pour appeler les données, et une fonction de formulaire de calcul suggérée est complétée avec seulement quelques lignes de code.

2. Implémenter la fonction de réinitialisation du formulaire

Le code suivant implémente une fonction fréquemment utilisée dans un formulaire : réinitialiser le formulaire.

Code HTML :

<div ng-app="myApp" ng-controller="formCtrl"> 
<form> 
First Name:<br> 
<input type="text" ng-model="user.firstName"><br> 
Last Name:<br> 
<input type="text" ng-model="user.lastName"> 
<br><br> 
<button ng-click="reset()">RESET</button> 
</form> 
<p>form = {{user}}</p> 
</div> 

Code JS :

var app = angular.module('myApp', []); 
app.controller('formCtrl', function($scope) { 
$scope.master = {firstName: "John", lastName: "Doe"}; 
$scope.reset = function() { 
$scope.user = angular.copy($scope.master); 
}; 
$scope.reset(); 
}); 

Dans le code du contrôleur JS, nous définissons l'objet maître pour stocker la valeur de la zone de saisie du formulaire au moment initial. Nous avons défini une méthode reset(). Une fois la méthode exécutée, la valeur dans le maître est attribuée à l'utilisateur à l'aide de la méthode angulaire.copy. Cette méthode est utilisée pour réinitialiser les champs du formulaire. Dans le code HTML, nous utilisons l'événement ng-click mouse click pour déclencher la fonction reset() afin d'implémenter notre fonction.

3. Implémentez la fonction de champ de sélection du menu déroulant du formulaire

Dans Angular, la mise en œuvre de menus déroulants est simple. Nous pouvons utiliser la directive ng-repeat pour implémenter facilement un menu déroulant :

Tout d'abord, définissez les données dans le modèle js. Le format des données est le suivant :

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names = ["Google", "Runoob", "Taobao"]; 
}); 

Ensuite, nous utilisons ng-repeat pour lire les données du modèle en HTML (voir le blog précédent pour la signification spécifique)

<div ng-app="myApp" ng-controller="myCtrl"> 
<select ng-model="selectedName" ng-options="x for x in names"> 
</select> 
</div> 

Concernant le menu déroulant, cela implique également de lire les données de la base de données, de la télécommande, etc. De plus, il existe d'autres méthodes pour mettre en œuvre le menu déroulant. Ceux-ci seront discutés plus tard.