首頁 > web前端 > js教程 > 主體

AngularJS 雙向資料綁定詳解簡單實例

高洛峰
發布: 2016-12-09 14:31:17
原創
1290 人瀏覽過

angular的雙向資料綁定,個人理解是,透過model建立資料模型,那麼視圖上的資料就會對應儲存在angular程式裡,視圖上的資料變化會同步到model,model的資料改變也會同步到視圖。

下面的demo示範:

<!DOCTYPE html>
<html>
<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程式碼的事情(監聽onchange事件,將input的value賦給下面的strong元素),現在只用一個ng-model指令就完成了。 Perferct!

AngularJS 雙向資料綁定詳解簡單實例

案例詳解:

1. ng-model指令的作用:建立資料模型,在模型中對應有一個變數username用來存放input元素的value;

2. {{username}}}}是一個表達式,angular會自動計算該表達式,並替換成對應的值。

3. 手動輸入文字,input元素的value發生變化,自動同步到model的usename變量,{{username}}是從模型中讀username的值,因此下面strong元素的內容跟著變了。

同步資料是angular幫我們完成的。


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板