Learning AngularJS forms in practice and practicing angularjs forms

Learning AngularJS forms in practice and practicing angularjs forms

Form is the most common form. In Angular. js, there is no special function to add to the form separately. However, the Angular. js framework can be used to display forms more easily. The following describes how to skillfully implement several common functions in Angular.

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

The following generation implements a simple computing form that processes user input data and displays it in the form output field in real time:

<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, you can monitor user input data in real time and call data using, several lines of code are provided to complete a suggested form calculation function.

2. Implement form resetting

The following code implements a function that is frequently used in a form: reset a 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 values of the input box of the initial timetable. We have defined a reset () method. After this method is executed, the angular. copy method is used to assign the value in the master to the user. This method is used to reset the form field. In HTML code, we use the ng-click mouse to trigger the reset () function to implement our functions.

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

In Angular, the implementation of the drop-down menu is very simple. We can use the ng-repeat command to conveniently implement a drop-down menu:

First, define 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 in html to read data in the model (for more information, see the previous blog)

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

The drop-down menu also involves reading data from the database, remote, and other methods. These will be discussed later.

Articles you may be interested in:

• AngularJS implements Form Verification
• AngularJS form submission (form)
• Example of AngularJS form editing and submission Function
• AngularJS forms
• Detailed analysis of how to submit a form in AngularJS Programming
• How to Implement Form Wizard using AngularJS
• AngularJS implements manual form verification and Automatic Form Verification
• Details about how AngularJS implements Form Verification
• AngularJS uses ngMessages for Form Verification
• AngularJS uses angular-formly for Form Verification