Learning Angularjs Forms _angularjs in practice

Forms are the most common form of a build. In Angular.js, there is not a single number of special features added to the form. However, using the characteristics of the angular.js framework itself, you can render the form more user-friendly. The following describes how several commonly used features are cleverly implemented in angular.

1. Update output data in real time based on input field data

The following generation implements a simple calculation form that processes the data entered by the user and displays 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 prices:</b> {quantity * prices}}</p> 

By defining two Ng-model, the user input data is monitored in real time, and the data is called by {{}}, and a few lines of code complete a proposed computational form function.

2. Implement form Reset function

The following code implements a feature that is often used in a form: resetting the form.

HTML code:

<div ng-app= "myApp" ng-controller= "Formctrl" > <form> i name:<br> <input 
"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> 

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, which holds the value of the initial timetable single input box. We define a reset () method that, after execution, uses the Angular.copy method to assign the value in master to user, and use this method to reset the form field. In the HTML code, we use the Ng-click mouse click event to trigger the reset () function to achieve our function.

3. Implement form drop-down menu select Domain function

In angular, implementing the Drop-down menu is simple. We can use the ng-repeat instruction to easily implement a pull-down menu:

First, in the JS model of the definition of data, the data format is as follows:

var app = Angular.module (' myApp ', []); 
App.controller (' Myctrl ', function ($scope) { 
$scope. Names = ["Google", "Runoob", "Taobao"]; 

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

<div ng-app= "myApp" ng-controller= "Myctrl" > 
<select ng-model= "Selectedname" ng-options= "x for x in Names" > 
</select> 

The Drop-down menu also involves reading data from a database, remote, and so on, as well as other ways to implement a Drop-down menu. These will be discussed later.