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ì)本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
