AngularJS中的表單簡單入門

2019-11-20 09:23:22

字體：大中小

來源：轉載

供稿：網友

AngularJS 表單

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

HTML 控件

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

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

HTML 表單

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

AngularJS 表單實例

First Name:

Last Name:

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

應用程序代碼：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><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></body></html>

運行結果：

First Name:

Last Name:

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

注意： novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證。

實例解析

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

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

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

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

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

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