AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
更新時間：2016年10月20日 16:24:41 投稿：lqh
這篇文章主要介紹了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-11
AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法,結合實例形式分析了ng-app自動加載我們自定義的模塊作為根模塊的操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2017-01-01
angular中兩種表單的區(qū)別(響應式和模板驅動表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應式和模板驅動表單)，詳細的介紹了這兩種表單的實現(xiàn)以及區(qū)別，非常具有實用價值，需要的朋友可以參考下2018-12-12
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實現(xiàn)的。你可能會看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實它們在官方的文檔里都已經回答了，但是我還是想把它們結合在一起來講2015-10-10
這篇文章主要介紹了如何利用CSS3在Angular中實現(xiàn)動畫效果，對angular動畫相關知識感興趣的朋友一起學習吧2016-01-01
本篇文章主要介紹了淺談angularr4生命周期鉤子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了如何通過Angular實現(xiàn)表格自動滾動的效果，文中的示例代碼講解詳細，對我們學習Angular有一定幫助，需要的可以參考一下2022-01-01
這篇文章主要介紹了AngularJS中filter的使用實例詳解的相關資料,這里提供實例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下2017-08-08