AngularJS學習筆記（三）數據雙向綁定的簡單實例

2019-11-19 19:01:05

字體：大中小

來源：轉載

供稿：網友

雙向綁定

雙向綁定是AngularJS最實用的功能，它節省了大量的代碼，使我們專注于數據和視圖，不用浪費大量的代碼在Dom監聽、數據同步上，關于雙向更新，可看下圖：

數據-->視圖

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

<!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>      <!--頁面加載初期，用戶可能會看到綁定的表達式-->      <div>{{username}}</div>      <!--此綁定不會出現上述情況-->      <div ng-bind='username'></div>    </div>  </body></html>

點擊按鈕之后，div內容變成李四，效果如圖：

視圖―>數據

上個例子，我們看了數據變化后，視圖也會自動變化。那么這個例子則是反過來，視圖變化，導致數據也跟著變化，那么數據變化后，我們如何知道呢，這兒我們可以通過另外一個元素將數據再顯示出來。

<!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>

查看效果：