AngularJS 表單

AngularJS 中的表單提供輸入控件的數據綁定和驗證。

輸入控件

輸入控件是 HTML 輸入元素：

• input 元素
• select 元素
• button 元素
• textarea 元素

數據綁定

輸入控件通過使用 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 = "Bill";
});
</script>

親自試一試

它也可以在應用程序的其他位置被引用：

實例

<form>
  名字: <input type="text" ng-model="firstname">
</form>
<h1>您輸入的是：{{firstname}}</h1>

親自試一試

復選框

復選框的值為 true 或 false。將 ng-model 指令應用于復選框，并在您的應用程序中使用其值。

實例

如果選中復選框，則顯示標題：

<form>
  選中以顯示標題：
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我的標題</h1>

親自試一試

單選按鈕

使用 ng-model 指令將單選按鈕綁定到您的應用程序。

具有相同 ng-model 的單選按鈕可以有不同的值，但只會使用選定的值。

實例

根據所選單選按鈕的值顯示一些文本：

<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>

親自試一試

myVar的值將是 dogs、tuts 或 cars。

下拉選擇框

使用 ng-model 指令將下拉選擇框綁定到您的應用程序。

ng-model 屬性中定義的屬性將具有選擇框中所選選項的值。

實例

根據選定的選項值顯示一些文本：

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

親自試一試

myVar 的值將是 dogs、tuts 或 cars。

AngularJS 表單示例

應用程序代碼

<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>

親自試一試

novalidate 屬性是 HTML5 中的新屬性。它禁用任何默認瀏覽器驗證。

Example Explained

ng-app 指令定義 AngularJS 應用程序。

ng-controller 指令定義應用程序控制器。

ng-model 指令將兩個輸入元素綁定到模型中的 user 對象。

formCtrl 控制器為 master 對象設置初始值，并定義 reset() 方法。

reset() 方法將 user 對象設置為等于 master 對象。

ng-click 指令僅在單擊按鈕時才調用 reset() 方法。

此應用程序不需要 novalidate 屬性，但通常您會在 AngularJS 表單中使用它，以覆蓋標準 HTML5 驗證。