AngularJS 表單
AngularJS 表單是輸入控件的集合。
HTML 控件
以下 HTML input 元素被稱為 HTML 控件:
- input 元素
- select 元素
- button 元素
- textarea 元素
HTML 表單
HTML 表單通常與 HTML 控件同時(shí)存在。
AngularJS 表單實(shí)例
function ExampleController($scope) {
$scope.master = {"firstName":"John","lastName":"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
First Name:
Last Name:
form = {{user}}
master = {{master}}
應(yīng)用程序代碼
<div ng-app="" ng-controller="formController">
<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>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
嘗試一下 ?
 | HTML 屬性 novalidate 用于禁用瀏覽器的默認(rèn)驗(yàn)證。 |
實(shí)例解析
AngularJS ng-model 指令用于綁定 input 元素到模型中。
模型對(duì)象 master 的值為 {"firstName" : "John", "lastName" : "Doe"}。
模型函數(shù) reset 設(shè)置了模型對(duì)象 user 等于 master。
相關(guān)文章
HTML 表單
更多建議: