AngularJS入門之數據綁定

時間 2019-12-13

原文原文鏈接

本篇咱們看一下AngularJS中的數據綁定。雖然咱們直到這篇才提到數據綁定，但事實上在前面幾篇中咱們已經很是熟練的運用AngularJS的數據綁定功能了！javascript

ngBind（ng-bind）/ {{ expression }}：

 1 <!DOCTYPE >
 2 <html>
 3 <head>
 4     <script src="/Scripts/angular.js"></script>
 5 </head>
 6 <body ng-app>
 7     <input ng-model="yourName" />
 8     <p>
 9         Hello, {{yourName}}
10     </p>
11     <p>
12         Use ngBind to display: <span ng-bind="yourName"></span>
13     </p>
14 </body>
15 </html>

若是你已經看過前面幾篇文章，我相信你已經很是熟悉這樣的代碼了。AngualrJS中使用ngBind進行數據綁定，可是咱們更多的會使用Expression（即{{expression}}這樣的寫法）替代ngBind，這種寫法更簡便直觀。html

AngularJS還提供了其餘幾種數據綁定方式：java

ngBindHtml:

 1 <!DOCTYPE >
 2 <html>
 3 <head>
 4     <script src="/Scripts/angular.js"></script>
 5     <script src="/Scripts/angular-sanitize.js"></script>
 6     <script type="text/javascript">
 7         (function () {
 8             var app = angular.module('twowayBindingTest', ['ngSanitize']);
 9 
10             app.controller('myController', ['$scope', function ($scope) {
11                 $scope.myHtml = "This is a link: <a href=\"#\">Mylink</a>";
12             }]);
13         })();
14     </script>
15 </head>
16 <body ng-app="twowayBindingTest" ng-controller="myController">
17     <div>
18         <span ng-bind-html="myHtml"></span>
19     </div>
20 </body>
21 </html>

ngBindHtml(ng-bind-html)能夠將一個字符串以安全的方式插入到頁面中並顯示成Html。angularjs

ngBindHtml將強制使用angular-santitize服務進行安全檢查，因爲並不是包含在AngualrJS核心庫中，所以須要引入angular-santitize.js文件，並在定義ngModule時添加對於ngSantitize的依賴聲明。express

關於AngularJS的服務咱們將在從此再統一討論，這裏就不展開了。api

ngBindTemplate：

 1 <!DOCTYPE >
 2 <html>
 3 <head>
 4     <script src="/Scripts/angular.js"></script>
 5 </head>
 6 <body ng-app>
 7     Name:<input ng-model="yourName" />
 8     <br />
 9     Age:<input ng-model="yourAge" />
10     <p>
11         <span ng-bind-template="This is {{yourName}}, I'm {{yourAge}} years old."></span>
12     </p>
13 </body>
14 </html>

ngBindTemplate（ng-bind-template）與ngBind不一樣之處在於：ngBind只能單個綁定變量，且變量無需使用雙括號「{{}}」，而ngBindTemplate則能夠綁定一個模板，模板中能夠包含多個AngularJS的表達式：「{{expression}}」。安全

ngNonBindable:

1 <!DOCTYPE >
2 <html>
3 <head>
4     <script src="/Scripts/angular.js"></script>
5 </head>
6 <body ng-app>
7     <div ng-non-bindable>This will not be changed: {{1 + 2}}</div>
8 </body>
9 </html>

固然，若是你頁面上正好有"{{ my content }}" 這樣的內容，不須要執行AngularJS幫你進行編譯和計算，使用ngNonBindable（ng-non-binable），AngularJS會自動忽略該內容。app

使用ngModel實現Twoway Binding：

 1 <!DOCTYPE >
 2 <html>
 3 <head>
 4     <script src="/Scripts/angular.js"></script>
 5     <script type="text/javascript">
 6         (function () {
 7             var app = angular.module('twowayBindingTest', []);
 8 
 9             app.controller('myController', ['$scope', function ($scope) {
10                 $scope.students = [];
11 
12                 $scope.addStudent = function (stu) {
13                     $scope.students.push(stu);
14                     $scope.stu = {};
15                 };
16 
17                 $scope.removeStudent = function (index) {
18                     $scope.students.splice(index, 1);
19                 };
20             }]);
21 
22 
23         })();
24     </script>
25 </head>
26 <body ng-app="twowayBindingTest" ng-controller="myController">
27     <div>
28         <p>Name:<input ng-model="stu.name"></input></p>
29         <p>Age:<input ng-model="stu.age"></input></p>
30         <input type="button" ng-click="addStudent(stu)" value="Add" />
31     </div>
32     <hr />
33     <div ng-repeat="stu in students">
34         <span ng-hide="editMode">{{stu.name}}</span>
35         <input type="text" ng-show="editMode" ng-model="stu.name" />
36 
37         <span ng-hide="editMode">{{stu.age}}</span>
38         <input type="text" ng-show="editMode" ng-model="stu.age" />
39 
40         <input type="button" value="Edit" ng-hide="editMode" ng-click="editMode = true" />
41         <input type="button" value="Save" ng-show="editMode" ng-click="editMode = false" />
42         <input type="button" value="Remove" ng-hide="editMode" ng-click="removeStudent($index)" />
43         <hr />
44     </div>
45 </body>
46 </html>

上面的代碼就展現了AngularJS中的雙向綁定的用法。若是你仔細看完代碼並執行一下，就會發現雙向綁定的奇妙之處。ide

<input type="button" value="Edit" ng-hide="editMode" ng-click="editMode = true" />
<input type="button" value="Save" ng-show="editMode" ng-click="editMode = false" />

編輯、保存按鈕的代碼很是簡單，都不須要添加業務邏輯，由於是雙向綁定，當改變輸入框內的內容並點擊Save以後，因爲span中的stu.name和stu.age以及$scope.students中相應的記錄的name和age指向了相同的ng-model，所以AngularJS會自動完成這三者之間的同步變動。所以你都不須要編寫額外的代碼去完成編輯、保存這樣的行爲，這就是雙向綁定帶來的奇妙體驗。spa

本篇講述了AngularJS中的數據綁定，是否是很簡單但也超級實用呢？