實踐中學習AngularJS表單
表單是最常用的一種組建。在Angular.js中，其實并沒有單獨的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現(xiàn)的。
1.根據(jù)輸入域數(shù)據(jù)實時更新輸出數(shù)據(jù)
下面代嗎實現(xiàn)了一個簡易的計算表單，它能將用戶輸入的數(shù)據(jù)進行處理，并且實時顯示在表單輸出域中：
<div ng-app="" ng-init="quantity=1;price=5">
數(shù)量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
通過定義兩個ng-model，將用戶輸入的數(shù)據(jù)進行實時監(jiān)聽，并且利用{{}}進行數(shù)據(jù)的調(diào)用，擁幾行代碼就完成了一個建議的計算表單功能。
2.實現(xiàn)表單重置功能
下面的代碼實現(xiàn)了一個表單中經(jīng)常使用的功能：重置表單。
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>
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();
});
在JS控制器代碼中，我們定義了master對象，用來存放初始時刻表單輸入框的值。我們定義了一個reset()方法，該方法執(zhí)行后，利用angular.copy方法，將master中的值賦值給user，利用這樣的方法實現(xiàn)了表單域的重置。在HTML代碼中，我們使用ng-click鼠標點擊事件觸發(fā)reset()函數(shù)，從而實現(xiàn)我們的功能。
3.實現(xiàn)表單下拉菜單選擇域功能
在Angular中，實現(xiàn)下拉菜單很簡單。我們可以利用ng-repeat指令來方便的實現(xiàn)一個下拉菜單：
首先，在js的模型中定義數(shù)據(jù)，數(shù)據(jù)格式如下：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
然后，我們在html中，利用ng-repeat進行模型中數(shù)據(jù)的讀?。ň唧w含義見之前博客）
<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div>
關(guān)于下拉菜單，還涉及到從數(shù)據(jù)庫、遠程等讀取數(shù)據(jù)，此外還有其他方法實現(xiàn)下拉菜單。這些將在之后進行討論。
相關(guān)文章
這篇文章主要介紹了AngularJS學習筆記之表單驗證功能,結(jié)合實例形式分析了AngularJS針對表單的校驗、監(jiān)控等相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
AngularJS基礎(chǔ) ng-focus 指令簡單示例
本文主要介紹AngularJS ng-focus 指令,這里整理了ng-focus的一些基礎(chǔ)資料,并附一個實例代碼,有需要的小伙伴參考下2016-08-08
今天小編就為大家分享一篇Angular異步變同步處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹AngularJS的面試題資料整理，這里整理了相關(guān)面試題的資料，幫助大家學習理解AngularJS的知識，有興趣的小伙伴可以參考下2016-09-09
本文通過示例向大家介紹了AngularJS語法的使用，小伙伴們認真研讀下吧，非常的實用哦。2015-01-01
AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能,結(jié)合完整實例形式分析了AngularJS隨機數(shù)生成與數(shù)值判定相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
本文給大家介紹ANGULARJS中使用JQUERY分頁控件，需要的朋友可以參考下2015-09-09
Angular HMR(熱模塊替換)功能實現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹AngularJS包括的基礎(chǔ)知識，這里整理了相關(guān)資料并附示例代碼和實現(xiàn)效果圖，有需要的小伙伴可以參考下2016-08-08