表單
輸入控件
輸入控件是 HTML 輸入元素：
- input 元素
- select 元素
- button 元素
- textarea 元素
數(shù)據(jù)綁定
輸入控件通過(guò)使用 ng-model 指令提供數(shù)據(jù)綁定。
<input type="text" ng-model="firstname">
現(xiàn)在，該應(yīng)用有一個(gè)名為 firstname 的屬性。
ng-model 指令將輸入控制器綁定到應(yīng)用程序的其余部分。
屬性 firstname，可以在控制器中引用：
實(shí)例
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "Bill";
});
</script>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
它也可以在應(yīng)用程序的其他位置被引用：
實(shí)例
<form>
名字: <input type="text" ng-model="firstname">
</form>
<h1>您輸入的是：{{firstname}}</h1>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
復(fù)選框
復(fù)選框的值為 true 或 false。將 ng-model 指令應(yīng)用于復(fù)選框，并在您的應(yīng)用程序中使用其值。
實(shí)例
如果選中復(fù)選框，則顯示標(biāo)題：
<form> 選中以顯示標(biāo)題： <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">我的標(biāo)題</h1>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
單選按鈕
使用 ng-model 指令將單選按鈕綁定到您的應(yīng)用程序。
具有相同 ng-model 的單選按鈕可以有不同的值，但只會(huì)使用選定的值。
實(shí)例
根據(jù)所選單選按鈕的值顯示一些文本：
<form> Pick a topic: <input type="radio" ng-model="myVar" value="dogs">Dogs <input type="radio" ng-model="myVar" value="tuts">Tutorials <input type="radio" ng-model="myVar" value="cars">Cars </form>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
myVar的值將是 dogs、tuts 或 cars。
下拉選擇框
使用 ng-model 指令將下拉選擇框綁定到您的應(yīng)用程序。
ng-model 屬性中定義的屬性將具有選擇框中所選選項(xiàng)的值。
實(shí)例
根據(jù)選定的選項(xiàng)值顯示一些文本：
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
myVar 的值將是 dogs、tuts 或 cars。
AngularJS 表單示例
名字： Bill 姓氏： Gates 重置 form = {"firstName":"Bill","lastName":"Gates"} master = {"firstName":"Bill","lastName":"Gates"}應(yīng)用程序代碼
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
名字：<br>
<input type="text" ng-model="user.firstName"><br>
姓氏：<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">重置</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "Bill", lastName: "Gates"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
novalidate 屬性是 HTML5 中的新屬性。它禁用任何默認(rèn)瀏覽器驗(yàn)證。
Example Explained
ng-app 指令定義 AngularJS 應(yīng)用程序。
ng-controller 指令定義應(yīng)用程序控制器。
ng-model 指令將兩個(gè)輸入元素綁定到模型中的 user 對(duì)象。
formCtrl 控制器為 master 對(duì)象設(shè)置初始值，并定義 reset() 方法。
reset() 方法將 user 對(duì)象設(shè)置為等于 master 對(duì)象。
ng-click 指令僅在單擊按鈕時(shí)才調(diào)用 reset() 方法。
此應(yīng)用程序不需要 novalidate 屬性，但通常您會(huì)在 AngularJS 表單中使用它，以覆蓋標(biāo)準(zhǔn) HTML5 驗(yàn)證。