简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

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

高洛峰
發布： 2016-12-24 10:30:18
原創
1148 人瀏覽過

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幫我們完成的。

感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！

更多AngularJS 雙向資料綁定詳解簡單實例相關文章請關注PHP中文網！


相關標籤：
AngularJS 双向数据绑定
來源：php.cn
上一篇：詳解JavaScript的AngularJS框架中的作用域與資料綁定 下一篇：AngularJS實踐之使用NgModelController進行資料綁定
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用object標籤嵌入跨域SVG內容文檔 擁有一個包含外部網域資料的SVG是否“合法”，即(data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e...
來自於 2023-10-31 18:04:21
0
1
249
取得重定向目標的PHP cURL方法，而不進行跟隨重定向 curl_getinfo函數傳回大量有關HTTP請求結果的元資料。但是，由於某種原因，它不包含我目前想要的訊息，如果請求返回HTTP重定向程式碼，該訊息就是目標URL。我沒有使用C...
來自於 2023-10-25 08:56:01
0
1
205
如何在登出時重置Nuxt應用程式的狀態？ 當使用者退出應用程式時，Pinia持久的authStore狀態會被重置，並且使用者會被重新導向到/login。然而，如果下一個用戶在不刷新頁面的情況下登錄，主頁仍然顯示上一個用戶的...
來自於 2023-09-16 20:59:12
0
1
278
Nodejs：將非 HTML 資料傳回瀏覽器的正確方法？ 用戶JWT作為僅HTTPcookie發送到瀏覽器。我的問題是，向瀏覽器傳達顯示名稱和使用者資料庫ID等的最佳方式是什麼？我知道資訊可以並且確實在JWT有效負載中設置，但是使該coo...
來自於 2023-09-15 16:04:49
0
1
736
PHP身份驗證後無法成功寫入MySQL資料庫 我正在嘗試在認證後向資料庫寫入數據，但無法成功。一旦成功登錄，我會重新導向到index.php<?phpsession_start();if(isset($_SESSION[...
來自於 2023-09-13 09:54:01
0
1
244
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！