AngularJS中的表單簡(jiǎn)單入門(mén)

更新時(shí)間：2016年07月28日 10:07:16 投稿：lqh

本文主要介紹AngularJS 表單,這里對(duì)AngularJS 表單知識(shí)做了詳細(xì)整理介紹,希望能幫助有需要的小伙伴

AngularJS 表單

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

HTML 控件

以下 HTML input 元素被稱(chēng)為 HTML 控件:

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

HTML 表單

HTML 表單通常與 HTML 控件同時(shí)存在。

AngularJS 表單實(shí)例

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>

運(yùn)行結(jié)果：

First Name:

Last Name:

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

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

注意： novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認(rèn)驗(yàn)證。

實(shí)例解析

ng-app 指令定義了 AngularJS 應(yīng)用。

ng-controller 指令定義了應(yīng)用控制器。

ng-model 指令綁定了兩個(gè) input 元素到模型的 user 對(duì)象。

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

reset() 方法設(shè)置了 user 對(duì)象等于 master 對(duì)象。

ng-click 指令調(diào)用了 reset() 方法，且在點(diǎn)擊按鈕時(shí)調(diào)用。

novalidate 屬性在應(yīng)用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫(xiě)標(biāo)準(zhǔn)的 HTML5 驗(yàn)證。

以上就是對(duì)AngularJS 表單資料的整理，后續(xù)繼續(xù)補(bǔ)充，希望能幫助編程的同學(xué)。

您可能感興趣的文章:

相關(guān)文章

Angular value與ngValue區(qū)別詳解
這篇文章主要介紹了Angular value與ngValue區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Angular.JS內(nèi)置服務(wù)$http對(duì)數(shù)據(jù)庫(kù)的增刪改使用教程
我們可以使用內(nèi)置的$http服務(wù)直接同外部進(jìn)行通信。$http服務(wù)只是簡(jiǎn)單的封裝了瀏覽器原生的XMLHttpRequest對(duì)象，下面這篇文章主要給大家介紹了關(guān)于Angular.JS內(nèi)置服務(wù)$http對(duì)數(shù)據(jù)庫(kù)的增刪改等操作的相關(guān)資料，需要的朋友可以參考下。
2017-05-05
angularJS 中$attrs方法使用指南
這篇文章主要介紹了angularJS 中$attrs方法使用指南,需要的朋友可以參考下
2015-02-02
小談angular ng deploy的實(shí)現(xiàn)
這篇文章主要介紹了小談angular ng deploy的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問(wèn)題及解決辦法，有興趣的小伙伴可以參考下
2016-09-09
AngularJS入門(mén)教程之迭代器過(guò)濾詳解
本文主要介紹AngularJS 迭代器過(guò)濾,這里提供了詳細(xì)的知識(shí)資料，并附示例代碼，有需要的小伙伴可以參考下
2016-08-08
Angularjs中ng-repeat的簡(jiǎn)單實(shí)例
這篇文章主要介紹了Angularjs中ng-repeat的簡(jiǎn)單實(shí)例的相關(guān)資料,這里提供兩個(gè)實(shí)例方法幫助大家徹底掌握這部分內(nèi)容，需要的朋友可以參考下
2017-08-08
Angular2的管道Pipe的使用方法
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細(xì)的介紹了管道的定義和使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-11-11