快捷導(dǎo)航

AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡單實(shí)例

更新時(shí)間：2016年11月08日 11:07:17 作者：Localhost

這篇文章主要介紹了AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡單實(shí)例，詳解數(shù)據(jù)雙向綁定實(shí)例的相關(guān)資料,需要的朋友可以參考下。

雙向綁定

雙向綁定是AngularJS最實(shí)用的功能，它節(jié)省了大量的代碼，使我們專注于數(shù)據(jù)和視圖，不用浪費(fèi)大量的代碼在Dom監(jiān)聽、數(shù)據(jù)同步上，關(guān)于雙向更新，可看下圖：

數(shù)據(jù)-->視圖

這里我們只演示有了數(shù)據(jù)以后，如何綁定到視圖上。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username='張三'
      
        $scope.changename=function(){
          $scope.username='李四';  
        }
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <button class='btn btn-primary' ng-click='changename();'>
        username='李四'
      </button>
      <!--頁面加載初期，用戶可能會(huì)看到綁定的表達(dá)式-->
      <div>{{username}}</div>
      <!--此綁定不會(huì)出現(xiàn)上述情況-->
      <div ng-bind='username'></div>
    </div>
  </body>
</html>

點(diǎn)擊按鈕之后，div內(nèi)容變成李四，效果如圖：

視圖—>數(shù)據(jù)

上個(gè)例子，我們看了數(shù)據(jù)變化后，視圖也會(huì)自動(dòng)變化。那么這個(gè)例子則是反過來，視圖變化，導(dǎo)致數(shù)據(jù)也跟著變化，那么數(shù)據(jù)變化后，我們?nèi)绾沃滥?，這兒我們可以通過另外一個(gè)元素將數(shù)據(jù)再顯示出來。

<!DOCTYPE html>

<html ng-app="App">
<head>
  <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
  <script type="text/javascript">

  var App = angular.module("App", []);

  App.controller("ctrl", function ($scope) {
      
       $scope.username='張三'
    });
    
  </script>
</head>
  <body>
    <div ng-controller ="ctrl">
      <input type='text' ng-model='username' />
      
      <div>{{username}}</div>
    </div>
  </body>
</html>

查看效果：