表單是最常用的一種組建。在Angular.js中，其實并沒有單獨的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點，可以更友好的呈現表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現的。 1.根據輸入域數據實時更新輸出數據 下面代嗎實現了一個簡易的計算表單，它能將用戶輸入的數據進行處理，并且實時顯示在表單輸出域中： ~~~ <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> ~~~ 通過定義兩個ng-model，將用戶輸入的數據進行實時監聽，并且利用{{}}進行數據的調用，擁幾行代碼就完成了一個建議的計算表單功能。 2.實現表單重置功能 下面的代碼實現了一個表單中經常使用的功能：重置表單。 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()方法，該方法執行后，利用angular.copy方法，將master中的值賦值給user，利用這樣的方法實現了表單域的重置。在HTML代碼中，我們使用ng-click鼠標點擊事件觸發reset()函數，從而實現我們的功能。 3.實現表單下拉菜單選擇域功能 在Angular中，實現下拉菜單很簡單。我們可以利用ng-repeat指令來方便的實現一個下拉菜單： 首先，在js的模型中定義數據，數據格式如下： ~~~ var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); ~~~ 然后，我們在html中，利用ng-repeat進行模型中數據的讀取（具體含義見之前博客） ~~~ <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select> </div> ~~~ 關于下拉菜單，還涉及到從數據庫、遠程等讀取數據，此外還有其他方法實現下拉菜單。這些將在之后進行討論。