AngularJS 表單
AngularJS 中的表單提供了輸入控制元件的資料繫結和驗證。
輸入控制元件
輸入控制元件是 HTML 輸入元素：
- 輸入元素
- 選擇元素
- 按鈕元素
- 文字區域元素
資料繫結
輸入控制元件透過使用 ng-model 指令提供資料繫結。
<input type="text" ng-model="firstname">
應用程式現在有一個名為 firstname 的屬性。
ng-model 指令將輸入控制器繫結到應用程式的其餘部分。
屬性 firstname 可以在控制器中引用：
示例
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
自己動手試一試 »
它也可以在應用程式的其他地方引用：
複選框
複選框的值為 true 或 false。將 ng-model 指令應用於複選框，並在您的應用程式中使用其值。
示例
如果複選框被選中，則顯示標題：
<form>
勾選以顯示標題
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我的標題</h1>
自己動手試一試 »
單選按鈕
使用 ng-model 指令將單選按鈕繫結到您的應用程式。
具有相同 ng-model 的單選按鈕可以有不同的值，但只會使用選定的那個。
示例
根據選定單選按鈕的值顯示一些文字：
<form>
選擇一個主題
<input type="radio" ng-model="myVar" value="dogs">狗
<input type="radio" ng-model="myVar" value="tuts">教程
<input type="radio" ng-model="myVar" value="cars">汽車
</form>
自己動手試一試 »
myVar 的值將是 dogs、tuts 或 cars。
選擇框
使用 ng-model 指令將選擇框繫結到您的應用程式。
ng-model 屬性中定義的屬性將具有選擇框中選定選項的值。
示例
根據選定選項的值顯示一些文字：
<form>
選擇一個主題
<select ng-model="myVar">
<option value="">
<option value="dogs">狗
<option value="tuts">教程
<option value="cars">汽車
</select>
</form>
自己動手試一試 »
myVar 的值將是 dogs、tuts 或 cars。
一個 AngularJS 表單示例
表單 = {{user}}
主控 = {{master}}
應用程式程式碼
<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>表單 = {{user}}</p>
<p>主控 = {{master}}</p>
</div>
<script>
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();
});
</script>
自己動手試一試 »
novalidate 屬性是 HTML5 中的新功能。它停用任何預設的瀏覽器驗證。
示例解釋
ng-app 指令定義了 AngularJS 應用程式。
ng-controller 指令定義了應用程式控制器。
ng-model 指令將兩個輸入元素繫結到模型中的 user 物件。
formCtrl 控制器為 master 物件設定初始值，並定義了 reset() 方法。
reset() 方法將 user 物件設定為等於 master 物件。
ng-click 指令僅在點選按鈕時呼叫 reset() 方法。
此應用程式不需要 novalidate 屬性，但通常您會在 AngularJS 表單中使用它來覆蓋標準 HTML5 驗證。
