Latest web development tutorials

AngularJS 表單

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

HTML 控件

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

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

HTML 表單

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

AngularJS 表單實例

First Name:

Last Name:


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 >

嘗試一下»
Note novalidate屬性是在HTML5中新增的。 禁用了使用瀏覽器的默認驗證。

實例解析

ng-app指令定義了AngularJS應用。

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

ng-model指令綁定了兩個input元素到模型的user對象。

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

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

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

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