快捷導(dǎo)航

AngularJS入門教程之?dāng)?shù)據(jù)綁定用法示例

更新時(shí)間：2016年11月01日 14:39:29 作者：Rongbo_J

這篇文章主要介紹了AngularJS之?dāng)?shù)據(jù)綁定用法,結(jié)合實(shí)例形式分析了AngularJS基于內(nèi)置指令ng-model實(shí)現(xiàn)數(shù)據(jù)綁定的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS數(shù)據(jù)綁定用法。分享給大家供大家參考，具體如下：

數(shù)據(jù)綁定是AngularJS中非常重要的特性，我們看一下下面的例子：

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial02</title>
</head>
<body>
<div>
 用戶名：<input type="text" ng-model="name" placeholder="用戶名"/>
 密碼：<input type="password" ng-model="pword" placeholder="密碼"/>
 <p>您輸入的用戶名：{{name}}</p>
 <p>您輸入的密碼：{{pword}}</p>
</div>
</body>
</html>

這個(gè)例子非常簡(jiǎn)單，我們先在瀏覽器中運(yùn)行一下看看效果。

當(dāng)我們?cè)谖谋究蛑休斎胄畔⒑?，我們輸入的信息?huì)動(dòng)態(tài)的回顯到頁(yè)面中。

在這個(gè)例子中我們使用到了AngularJs的另一個(gè)內(nèi)置指令ng-model,它表示我們?cè)谀Ｐ蛿?shù)據(jù)對(duì)象（$scope）中添加一個(gè)名為”name”的屬性，并將它和文本框?qū)ο筮M(jìn)行綁定。這意味著不管我們?cè)谖谋究蛑休斎胧裁?，都?huì)同步到這個(gè)”name”屬性中，AngularJs會(huì)監(jiān)聽表單對(duì)象相關(guān)事件，所以回顯內(nèi)容會(huì)隨著文本框的輸入而改變。

需要注意的是ng-model只能用在表單元素標(biāo)簽中。

AngularJS源碼可點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于AngularJS動(dòng)態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
深入聊一聊Angular開發(fā)的內(nèi)容
使用Angular開發(fā)需要非常多的前置知識(shí),比如TypeScript、RxJS等,所以學(xué)習(xí)成本比較高,下面這篇文章主要給大家關(guān)于Angular開發(fā)內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn)
本篇文章主要介紹了詳解Angular5 服務(wù)端渲染實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
AngularJS 過濾器（自帶和自建）詳解
這篇文章主要介紹了AngularJS 過濾器（自帶和自建）詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Angular CLI 使用教程指南參考小結(jié)
這篇文章主要介紹了Angular CLI 使用教程指南參考小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
在Angular中使用JWT認(rèn)證方法示例
這篇文章主要介紹了在Angular中使用JWT認(rèn)證方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
在學(xué)習(xí)了如何簡(jiǎn)單開始一個(gè)Angular程序之后，跟著網(wǎng)上的教程我也來實(shí)現(xiàn)一個(gè)購(gòu)物車功能，為了減少頁(yè)面樣式設(shè)計(jì)我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。
2016-08-08
Angular 中的路由詳解
路由是實(shí)現(xiàn)單頁(yè)面應(yīng)用的一種方式,通過監(jiān)聽hash或者h(yuǎn)istory的變化,渲染不同的組件,起到局部更新的作用,避免每次URL變化都向服務(wù)器請(qǐng)求數(shù)據(jù),本文給大家介紹Angular 中的路由,感興趣的朋友一起看看吧
2023-11-11
詳解AngularJS過濾器的使用
這篇文章主要為大家詳細(xì)介紹了AngularJS過濾器的使用方法，感興趣的小伙伴們可以參考一下
2016-03-03
快速學(xué)習(xí)AngularJs HTTP響應(yīng)攔截器
任何時(shí)候，如果我們想要為請(qǐng)求添加全局功能，例如身份認(rèn)證、錯(cuò)誤處理等，在請(qǐng)求發(fā)送給服務(wù)器之前或服務(wù)器返回時(shí)對(duì)其進(jìn)行攔截，是比較好的實(shí)現(xiàn)手段
2015-12-12