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)容同步變化。是不是很驚奇！以前需要寫(xiě)一大段js代碼的事情（監(jiān)聽(tīng)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操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個(gè)對(duì)象呢？今天小編通過(guò)本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法,結(jié)合實(shí)例形式分析了ng-app自動(dòng)加載我們自定義的模塊作為根模塊的操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)，詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問(wèn)題，其實(shí)它們?cè)诠俜降奈臋n里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來(lái)講2015-10-10
利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫(huà)
這篇文章主要介紹了如何利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫(huà)效果，對(duì)angular動(dòng)畫(huà)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
本篇文章主要介紹了淺談angularr4生命周期鉤子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angular實(shí)現(xiàn)表格自滾動(dòng)效果
這篇文章主要為大家介紹了如何通過(guò)Angular實(shí)現(xiàn)表格自動(dòng)滾動(dòng)的效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Angular有一定幫助，需要的可以參考一下2022-01-01
這篇文章主要介紹了AngularJS中filter的使用實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下2017-08-08