AngularJS 雙向數(shù)據(jù)綁定詳解簡(jiǎn)單實(shí)例
angular的雙向數(shù)據(jù)綁定，個(gè)人理解是，通過(guò)model建立數(shù)據(jù)模型，那么視圖上的數(shù)據(jù)就會(huì)對(duì)應(yīng)存儲(chǔ)在angular程序里，視圖上的數(shù)據(jù)變化會(huì)同步到model，model的數(shù)據(jù)改變也會(huì)同步到視圖。
下面的demo演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello, AngularJS!</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-app>
<!-- ng-model指令將表單的value綁定到model的username變量-->
<input ng-model="username" type="text" placeholder="請(qǐng)輸入...">
<p>Hello, <strong>{{username}}</strong>!</p>
</div>
</body>
</html>
運(yùn)行結(jié)果：程序運(yùn)行后，在輸入框輸入文字，下面會(huì)與輸入框內(nèi)容同步變化。是不是很驚奇！以前需要寫一大段js代碼的事情（監(jiān)聽onchange事件，將input的value賦給下面的strong元素），現(xiàn)在只用一個(gè)ng-model指令就完成了。Perferct!
案例詳解：
1. ng-model指令的作用：建立數(shù)據(jù)模型，在模型中對(duì)應(yīng)有一個(gè)變量username用來(lái)存放input元素的value；
2. {{username}}是一個(gè)表達(dá)式，angular會(huì)自動(dòng)計(jì)算該表達(dá)式，替換成相應(yīng)的值。
3. 手動(dòng)輸入文字，input元素的value發(fā)生變化，自動(dòng)同步到model的usename變量，{{username}}是從模型中讀username的值，因此下面strong元素的內(nèi)容跟著變了。
同步數(shù)據(jù)是angular幫我們完成的。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
詳解angularjs獲取元素以及angular.element()用法
本篇文章主要介紹了詳解angularjs獲取元素以及angular.element()用法 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請(qǐng)根據(jù)實(shí)際業(yè)務(wù)需求做相應(yīng)調(diào)整。2017-06-06
angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
本篇文章主要介紹了angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)實(shí)例代碼
這篇文章主要介紹了AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁(yè)的相關(guān)資料,并附實(shí)例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-10-10
angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07
Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例
這篇文章主要介紹了Angular 通過(guò)注入 $location 獲取與修改當(dāng)前頁(yè)面URL的實(shí)例代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實(shí)例形式分析了基于Angular組件庫(kù)實(shí)現(xiàn)搜索功能的封裝操作相關(guān)實(shí)現(xiàn)步驟與注意事項(xiàng),需要的朋友可以參考下2019-04-04
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下2017-09-09