angularjs學習筆記之雙向資料綁定-js教程-PHP中文網

首頁

web前端

js教程

angularjs學習筆記之雙向資料綁定

高洛峰

Dec 24, 2016 am 10:07 AM

這次我們來詳細講解angular的雙向資料綁定。

一.簡單的例子

這個例子我們在第一節已經展示過了，要看的移步這裡

這裡實現的效果就是，在輸入框輸入內容，下面也會相應的改變對應的內容。這就實現了資料雙向綁定。

二.取值表達式與ng-bind的使用

我們再看一個例子，點擊這裡，文中出現的第一個例子中，{{greeting.text}}和{{text}}就是一個取值表達式了，但是如果你一直刷新頁面，你會發現這樣一個問題，那就是頁面有時候會一瞬間的出現“{{greeting.text}} {{text}}”這個字串，那我們該如何解決呢？

這裡就用到ng-bind指令了：用來綁定資料表達式。

了。

　　但是使用指令總是比直接使用表達式的效率低一點，所以我們總結了一個常用規律：一般來說，index使用ng-bind，後續模版中的使用'{{}}'的形式。

三.雙向綁定的典型場景－表單

　　先看一個form.html的內容：

<p>{{greeting.text}} {{text}}</p>

　　　　1.點擊」取得「，可以在控制台輸出三個數據，郵箱、密碼和選取狀態（true、false）

　　　　2.點擊「設定」：可以更改兩個輸入框的值和複選框取消選取的狀態；

　　　　3.點選「重設」：可以讓資料恢復到初始資料。

　　因為輸入框中的ng-model和控制器中的數值實現了雙向綁定，所以更改輸入框的值或者更改控制器中的值，都會相應的更改雙方的值。就這麼幾行程式碼，就實現了這麼強大的功能，是不是覺得很神奇呢？確實很神奇，不過，更神奇的還在後面呢！繼續吧！

四.動態切換標籤樣式

先看color.html的內容：

"<p><span ng-bind="greeting.text"></span><span ng-bind="text"></span></p>";

　　我們看第19行：存在一個「color」的變數”時，執行setGreen函數，改變“color”的值為“green”，所以更改了類別名，從而也更改了背景顏色。使用這樣的方法，讓我們不用去直接操作元素，而是加一個變數就行了。代碼簡潔直觀。

　　我們再看一下color.js的內容：

<!doctype html>
<html ng-app="UserInfoModule">
 
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
 <script src="js/angular-1.3.0.js"></script>
 <script src="Form.js"></script>
</head>
 
<body>
 <p class="panel panel-primary">
  <p class="panel-heading">
   <p class="panel-title">双向数据绑定</p>
  </p>
  <p class="panel-body">
   <p class="row">
    <p class="col-md-12">
     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
      <p class="form-group">
       <label class="col-md-2 control-label">
        邮箱：
       </label>
       <p class="col-md-10">
        <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email">
       </p>
      </p>
      <p class="form-group">
       <label class="col-md-2 control-label">
        密码：
       </label>
       <p class="col-md-10">
        <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password">
       </p>
      </p>
      <p class="form-group">
       <p class="col-md-offset-2 col-md-10">
        <p class="checkbox">
         <label>
          <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
         </label>
        </p>
       </p>
      </p>
      <p class="form-group">
       <p class="col-md-offset-2 col-md-10">
        <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
        <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
        <button class="btn btn-default" ng-click="resetForm()">重置表单</button>
       </p>
      </p>
     </form>
    </p>
   </p>
  </p>
 </p>
</body>
 
</html>

　　屬性“color”的預設值為“red”，所以顯示紅色，點擊時執行函數，變成綠色。

更多angularjs學習筆記之雙向資料綁定相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles