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操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何創(chuàng)造(使用)這樣一個(gè)對(duì)象呢?今天小編通過(guò)本文給大家分享下,感興趣的朋友一起學(xué)習(xí)吧2016-11-11AngularJS使用帶屬性值的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-01angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單),詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-12-12淺談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)畫
這篇文章主要介紹了如何利用CSS3在Angular中實(shí)現(xiàn)動(dòng)畫效果,對(duì)angular動(dòng)畫相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問(wèn)題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Angular實(shí)現(xiàn)表格自滾動(dòng)效果
這篇文章主要為大家介紹了如何通過(guò)Angular實(shí)現(xiàn)表格自動(dòng)滾動(dòng)的效果,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Angular有一定幫助,需要的可以參考一下2022-01-01