AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
angular的雙向數(shù)據(jù)綁定,個人理解是,通過model建立數(shù)據(jù)模型,那么視圖上的數(shù)據(jù)就會對應存儲在angular程序里,視圖上的數(shù)據(jù)變化會同步到model,model的數(shù)據(jù)改變也會同步到視圖。
下面的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="請輸入..."> <p>Hello, <strong>{{username}}</strong>!</p> </div> </body> </html>
運行結果:程序運行后,在輸入框輸入文字,下面會與輸入框內容同步變化。是不是很驚奇!以前需要寫一大段js代碼的事情(監(jiān)聽onchange事件,將input的value賦給下面的strong元素),現(xiàn)在只用一個ng-model指令就完成了。Perferct!
案例詳解:
1. ng-model指令的作用:建立數(shù)據(jù)模型,在模型中對應有一個變量username用來存放input元素的value;
2. {{username}}是一個表達式,angular會自動計算該表達式,替換成相應的值。
3. 手動輸入文字,input元素的value發(fā)生變化,自動同步到model的usename變量,{{username}}是從模型中讀username的值,因此下面strong元素的內容跟著變了。
同步數(shù)據(jù)是angular幫我們完成的。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
AngularJS操作鍵值對象類似java的hashmap(填坑小結)
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何創(chuàng)造(使用)這樣一個對象呢?今天小編通過本文給大家分享下,感興趣的朋友一起學習吧2016-11-11AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法,結合實例形式分析了ng-app自動加載我們自定義的模塊作為根模塊的操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2017-01-01angular中兩種表單的區(qū)別(響應式和模板驅動表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應式和模板驅動表單),詳細的介紹了這兩種表單的實現(xiàn)以及區(qū)別,非常具有實用價值,需要的朋友可以參考下2018-12-12淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實現(xiàn)的。你可能會看到各種各樣的詞匯:$watch,$apply,$digest它們是如何工作的呢?這里我想回答這些問題,其實它們在官方的文檔里都已經回答了,但是我還是想把它們結合在一起來講2015-10-10