清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>>

AngularJS 表單

---

AngularJS 表單是輸入控件的集合。

---

HTML 控件

以下 HTML input 元素被稱為 HTML 控件:

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

HTML 表單

HTML 表單通常與 HTML 控件同時存在。

---

AngularJS 表單實例

First Name:

Last Name:


RESET

form = {{user}}

master = {{master}}

---

應用程序代碼

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    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>
  <p>master = {{{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 指令綁定了兩個 input 元素到模型的 user 對象。

formCtrl 函數設置了 master 對象的初始值，并定義了 reset() 方法。

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

ng-click 指令調用了 reset() 方法，且在點擊按鈕時調用。

novalidate 屬性在應用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫標準的 HTML5 驗證。