Forms are the most commonly used assemblies. In fact, there are no special functions added to the form separately. However, using the characteristics of the framework itself, the form can be presented more friendly. Below 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 generation implements a simple calculation form, which can process the data entered by the user and display it in real time in the form output field:
<div ng-app="" ng-init="quantity=1;price=5">
quantity： <input type="number" ng-model="quantity">
price： <input type="number" ng-model="price">
<p><b>Total price：</b> {{ quantity * price }}</p>
</div>
By defining two ng-models, the data entered by the user is monitored in real time, and using {{}} to call the data, a suggested calculation form function is completed with a few lines of code.
2. Implement the 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=""><br>
Last Name:<br>
<input type="text" ng-model="">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
</div>
JS code:
var app = ('myApp', []);
('formCtrl', function($scope) {
$ = {firstName: "John", lastName: "Doe"};
$ = function() {
$ = ($);
};
$();
});
In the JS controller code, we define the master object to store the value of the input box of the initial time form. We define a reset() method. After the method is executed, we use the method to assign the value in the master to the user, and use this method to realize the reset of the form field. In HTML code, we use the ng-click mouse click event to trigger the reset() function, thus implementing our function.
3. Implement the function of selecting domain in the form drop-down menu
In Angular, implementing the drop-down menu is simple. We can use the ng-repeat directive to easily implement a drop-down menu:
First, define data in js model, the data format is as follows:
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = ["Google", "Runoob", "Taobao"];
});
Then, in html, we use ng-repeat to read data in the model (see previous blog for details)
<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.