AngularJS 雙向數據綁定詳解簡單實例
更新時間：2016年10月20日 16:24:41 投稿：lqh
這篇文章主要介紹了AngularJS 雙向數據綁定詳解簡單實例的相關資料,需要的朋友可以參考下
angular的雙向數據綁定，個人理解是，通過model建立數據模型，那么視圖上的數據就會對應存儲在angular程序里，視圖上的數據變化會同步到model，model的數據改變也會同步到視圖。
下面的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元素），現在只用一個ng-model指令就完成了。Perferct!
案例詳解：
1. ng-model指令的作用：建立數據模型，在模型中對應有一個變量username用來存放input元素的value；
2. {{username}}是一個表達式，angular會自動計算該表達式，替換成相應的值。
3. 手動輸入文字，input元素的value發(fā)生變化，自動同步到model的usename變量，{{username}}是從模型中讀username的值，因此下面strong元素的內容跟著變了。
同步數據是angular幫我們完成的。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
詳解angularjs獲取元素以及angular.element()用法
本篇文章主要介紹了詳解angularjs獲取元素以及angular.element()用法 ，具有一定的參考價值，有興趣的可以了解一下2017-07-07
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請根據實際業(yè)務需求做相應調整。2017-06-06
angularJS+requireJS實現controller及directive的按需加載示例
本篇文章主要介紹了angularJS+requireJS實現controller及directive的按需加載示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
AngularJS 與Bootstrap實現表格分頁實例代碼
這篇文章主要介紹了AngularJS 與Bootstrap實現表格分頁的相關資料,并附實例代碼和實現效果圖，需要的朋友可以參考下2016-10-10
AngularJS中數據綁定相信大家應該都不陌生了,這篇文章主要給大家介紹了關于angular多選表單數據綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
Angular 通過注入 $location 獲取與修改當前頁面URL的實例
這篇文章主要介紹了Angular 通過注入 $location 獲取與修改當前頁面URL的實例代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular封裝搜索框組件操作,結合實例形式分析了基于Angular組件庫實現搜索功能的封裝操作相關實現步驟與注意事項,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關資料,需要的朋友可以參考下2017-09-09