Learn AngularJS forms in practice_AngularJS

Form is the most commonly used component. In Angular.js, there are not many special features added to the form alone. However, using the characteristics of the Angular.js framework itself, the form can be presented in a more friendly way. The following will introduce how several commonly used functions are cleverly implemented in Angular.

1. Update the output data in real time based on the input domain data

The following code implements a simple calculation form, which can process the data input by the user and display it in the form output field in real time:

<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> 

By defining two ng-models, the data input by the user is monitored in real time, and {{}} is used to call the data, and a suggested calculation form function is completed with just a few lines of code.

2. Implement form reset function

The following code implements a frequently used function in a form: resetting the form.

HTML code:

<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> 

JS code:

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(); 
}); 

In the JS controller code, we define the master object to store the value of the form input box at the initial moment. We defined a reset() method. After the method is executed, the value in the master is assigned to the user using the angular.copy method. This method is used to reset the form fields. In the HTML code, we use the ng-click mouse click event to trigger the reset() function to implement our function.

3. Implement the form drop-down menu selection field function

In Angular, implementing drop-down menus is simple. We can use the ng-repeat directive to easily implement a drop-down menu:

First, define the data in the js model. The data format is as follows:

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

Then, we use ng-repeat to read the data in the model in HTML (see the previous blog for specific meaning)

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

Regarding the drop-down menu, it also involves reading data from the database, remote, etc. In addition, there are other methods to implement the drop-down menu. These will be discussed later.