AngularJS中的表單簡單入門
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"}
應(yīng)用程序代碼：
<!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>
運行結(jié)果：
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
注意： novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證。
實例解析
ng-app 指令定義了 AngularJS 應(yīng)用。
ng-controller 指令定義了應(yīng)用控制器。
ng-model 指令綁定了兩個 input 元素到模型的 user 對象。
formCtrl 函數(shù)設(shè)置了 master 對象的初始值，并定義了 reset() 方法。
reset() 方法設(shè)置了 user 對象等于 master 對象。
ng-click 指令調(diào)用了 reset() 方法，且在點擊按鈕時調(diào)用。
novalidate 屬性在應(yīng)用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫標準的 HTML5 驗證。
以上就是對AngularJS 表單資料的整理，后續(xù)繼續(xù)補充，希望能幫助編程的同學。
相關(guān)文章
這篇文章主要介紹了Angular value與ngValue區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Angular.JS內(nèi)置服務(wù)$http對數(shù)據(jù)庫的增刪改使用教程
我們可以使用內(nèi)置的$http服務(wù)直接同外部進行通信。$http服務(wù)只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象，下面這篇文章主要給大家介紹了關(guān)于Angular.JS內(nèi)置服務(wù)$http對數(shù)據(jù)庫的增刪改等操作的相關(guān)資料，需要的朋友可以參考下。2017-05-05
這篇文章主要介紹了angularJS 中$attrs方法使用指南,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了小談angular ng deploy的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
angular.js實現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實現(xiàn)列表orderby排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法，有興趣的小伙伴可以參考下2016-09-09
本文主要介紹AngularJS 迭代器過濾,這里提供了詳細的知識資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angularjs中ng-repeat的簡單實例的相關(guān)資料,這里提供兩個實例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下2017-08-08
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下2017-11-11