angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定

更新時(shí)間：2015年09月26日 15:02:48 投稿：hebedich

AngularJS在$scope變量中使用臟值檢查來實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。

這次我們來詳細(xì)講解angular的雙向數(shù)據(jù)綁定。

一.簡單的例子

這個(gè)例子我們在第一節(jié)已經(jīng)展示過了，要看的移步這里

這里實(shí)現(xiàn)的效果就是，在輸入框輸入內(nèi)容，下面也會相應(yīng)的改變對應(yīng)的內(nèi)容。這就實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。

二.取值表達(dá)式與ng-bind的使用

我們再看一個(gè)例子，點(diǎn)擊這里，文中出現(xiàn)的第一個(gè)例子中，{{greeting.text}}和{{text}}就是一個(gè)取值表達(dá)式了，但是如果你一直刷新頁面，你會發(fā)現(xiàn)這樣一個(gè)問題，那就是頁面有時(shí)候會一瞬間的出現(xiàn)“{{greeting.text}} {{text}}”這個(gè)字符串，那我們該如何解決呢？

這里就用到ng-bind命令了：用于綁定數(shù)據(jù)表達(dá)式。

比如我們可以把

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

改為：

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

　　這樣改正之后，頁面刷新就不會有不希望出現(xiàn)的字符串出現(xiàn)了。

　　但是使用命令總要比直接使用表達(dá)式的效率低一點(diǎn)，所以我們總結(jié)了一個(gè)常用規(guī)律：一般來說，index使用ng-bind，后續(xù)模版中的使用'{{}}'的形式。

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

　　先看一個(gè)form.html的內(nèi)容：

<!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>
 <div class="panel panel-primary">
  <div class="panel-heading">
   <div class="panel-title">雙向數(shù)據(jù)綁定</div>
  </div>
  <div class="panel-body">
   <div class="row">
    <div class="col-md-12">
     <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl">
      <div class="form-group">
       <label class="col-md-2 control-label">
        郵箱：
       </label>
       <div class="col-md-10">
        <input type="email" class="form-control" placeholder="推薦使用126郵箱" ng-model="userInfo.email">
       </div>
      </div>
      <div class="form-group">
       <label class="col-md-2 control-label">
        密碼：
       </label>
       <div class="col-md-10">
        <input type="password" class="form-control" placeholder="只能是數(shù)字、字母、下劃線" ng-model="userInfo.password">
       </div>
      </div>
      <div class="form-group">
       <div class="col-md-offset-2 col-md-10">
        <div class="checkbox">
         <label>
          <input type="checkbox" ng-model="userInfo.autoLogin">自動登錄
         </label>
        </div>
       </div>
      </div>
      <div class="form-group">
       <div 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()">設(shè)置Form表單的值</button>
        <button class="btn btn-default" ng-click="resetForm()">重置表單</button>
       </div>
      </div>
     </form>
    </div>
   </div>
  </div>
 </div>
</body>

</html>

　　再看Form.js的內(nèi)容：

 var userInfoModule = angular.module('UserInfoModule', []);
 userInfoModule.controller('UserInfoCtrl', ['$scope',
  function($scope) {
   $scope.userInfo = {
    email: "253445528@qq.com",
    password: "253445528",
    autoLogin: true
   };
   $scope.getFormData = function() {
    console.log($scope.userInfo);
   };
   $scope.setFormData = function() {
    $scope.userInfo = {
     email: 'testtest@126.com',
     password: 'testtest',
     autoLogin: false
    }
   };
   $scope.resetForm = function() {
    $scope.userInfo = {
     email: "253445528@qq.com",
     password: "253445528",
     autoLogin: true
    };
   }
  }
 ])

　　實(shí)現(xiàn)效果截圖如下：

　　上圖實(shí)現(xiàn)的功能是：

　　　　1.點(diǎn)擊”獲取“，可以在控制臺輸出三個(gè)數(shù)據(jù)，郵箱、密碼和選中狀態(tài)（true、false）

　　　　2.點(diǎn)擊“設(shè)置”：可以更改兩個(gè)輸入框的值和復(fù)選框取消選中的狀態(tài)；

　　　　3.點(diǎn)擊“重置”：可以讓數(shù)據(jù)恢復(fù)到初始數(shù)據(jù)。

　　因?yàn)檩斎肟蛑械膎g-model和控制器中的數(shù)值實(shí)現(xiàn)了雙向綁定，所以更改輸入框的值或者更改控制器中的值，都會相應(yīng)的更改雙方的值。就這么幾行代碼，就實(shí)現(xiàn)了這么強(qiáng)大的功能，是不是覺得很神奇呢？確實(shí)很神奇，不過，更加神奇的還在后面呢！繼續(xù)吧！

四.動態(tài)切換標(biāo)簽樣式

先看color.html的內(nèi)容：

<!doctype html>
<html ng-app="MyCSSModule">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="CSS1.css">
</head>
<style type="text/css">
  .text-red {
    background-color: #ff0000; 
  }
  .text-green {
    background-color: #00ff00;
  }
</style>

<body>
  <div ng-controller="CSSCtrl">
    <p class="text-{{color}}">測試CSS樣式</p>
    <button class="btn btn-default" ng-click="setGreen()">綠色</button>
  </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="color.js"></script>

</html>

　　我們看第19行：有一個(gè)“color”的變量存在于這個(gè)p標(biāo)簽中，當(dāng)點(diǎn)擊“綠色”時(shí)，執(zhí)行setGreen函數(shù)，改變“color”的值為“green”，所以更改了類名，從而也更改了背景顏色。使用這樣的方法，讓我們不用去直接操作元素，而是加一個(gè)變量就行了。代碼簡潔直觀。

　　我們再看一下color.js的內(nèi)容：

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
  function($scope) {
    $scope.color = "red";
    $scope.setGreen = function() {
      $scope.color = "green";
    }
  }
])

　　屬性“color”的默認(rèn)值為“red”，所以顯示紅色，點(diǎn)擊時(shí)執(zhí)行函數(shù)，變?yōu)榫G色。

您可能感興趣的文章: