AngularJS入门之数据绑定

时间：2023-03-09 04:28:55
AngularJS入门之数据绑定

本篇我们看一下AngularJS中的数据绑定。虽然我们直到这篇才提到数据绑定，但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了！

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

 <!DOCTYPE >

 <html>

 <head>

     <script src="/Scripts/angular.js"></script>

 </head>

 <body ng-app>

     <input ng-model="yourName" />

     <p>

         Hello, {{yourName}}

     </p>

     <p>

         Use ngBind to display: <span ng-bind="yourName"></span>

     </p>

 </body>

 </html>

如果你已经看过前面几篇文章，我相信你已经非常熟悉这样的代码了。AngualrJS中使用ngBind进行数据绑定，但是我们更多的会使用Expression（即{{expression}}这样的写法）替代ngBind，这种写法更简便直观。

AngularJS还提供了其他几种数据绑定方式：

ngBindHtml:

 <!DOCTYPE >

 <html>

 <head>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/angular-sanitize.js"></script>

     <script type="text/javascript">

         (function () {

             var app = angular.module('twowayBindingTest', ['ngSanitize']);

             app.controller('myController', ['$scope', function ($scope) {

                 $scope.myHtml = "This is a link: <a href=\"#\">Mylink</a>";

             }]);

         })();

     </script>

 </head>

 <body ng-app="twowayBindingTest" ng-controller="myController">

     <div>

         <span ng-bind-html="myHtml"></span>

     </div>

 </body>

 </html>

ngBindHtml(ng-bind-html)可以将一个字符串以安全的方式插入到页面中并显示成Html。

ngBindHtml将强制使用angular-santitize服务进行安全检查，由于并非包含在AngualrJS核心库中，因此需要引入angular-santitize.js文件，并在定义ngModule时添加对于ngSantitize的依赖声明。

关于AngularJS的服务我们将在今后再统一讨论，这里就不展开了。

ngBindTemplate：

 <!DOCTYPE >

 <html>

 <head>

     <script src="/Scripts/angular.js"></script>

 </head>

 <body ng-app>

     Name:<input ng-model="yourName" />

     <br />

     Age:<input ng-model="yourAge" />

     <p>

         <span ng-bind-template="This is {{yourName}}, I'm {{yourAge}} years old."></span>

     </p>

 </body>

 </html>

ngBindTemplate（ng-bind-template）与ngBind不同之处在于：ngBind只能单个绑定变量，且变量无需使用双括号“{{}}”，而ngBindTemplate则可以绑定一个模板，模板中可以包含多个AngularJS的表达式：“{{expression}}”。

ngNonBindable:

 <!DOCTYPE >

 <html>

 <head>

     <script src="/Scripts/angular.js"></script>

 </head>

 <body ng-app>

     <div ng-non-bindable>This will not be changed: {{1 + 2}}</div>

 </body>

 </html>

当然，如果你页面上正好有"{{ my content }}" 这样的内容，不需要执行AngularJS帮你进行编译和计算，使用ngNonBindable（ng-non-binable），AngularJS会自动忽略该内容。

使用ngModel实现Twoway Binding：

 <!DOCTYPE >

 <html>

 <head>

     <script src="/Scripts/angular.js"></script>

     <script type="text/javascript">

         (function () {

             var app = angular.module('twowayBindingTest', []);

             app.controller('myController', ['$scope', function ($scope) {

                 $scope.students = [];

                 $scope.addStudent = function (stu) {

                     $scope.students.push(stu);

                     $scope.stu = {};

                 };

                 $scope.removeStudent = function (index) {

                     $scope.students.splice(index, 1);

                 };

             }]);

         })();

     </script>

 </head>

 <body ng-app="twowayBindingTest" ng-controller="myController">

     <div>

         <p>Name:<input ng-model="stu.name"></input></p>

         <p>Age:<input ng-model="stu.age"></input></p>

         <input type="button" ng-click="addStudent(stu)" value="Add" />

     </div>

     <hr />

     <div ng-repeat="stu in students">

         <span ng-hide="editMode">{{stu.name}}</span>

         <input type="text" ng-show="editMode" ng-model="stu.name" />

         <span ng-hide="editMode">{{stu.age}}</span>

         <input type="text" ng-show="editMode" ng-model="stu.age" />

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

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

         <input type="button" value="Remove" ng-hide="editMode" ng-click="removeStudent($index)" />

         <hr />

     </div>

 </body>

 </html>

上面的代码就展示了AngularJS中的双向绑定的用法。如果你仔细看完代码并执行一下，就会发现双向绑定的奇妙之处。

<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会自动完成这三者之间的同步变更。因此你都不需要编写额外的代码去完成编辑、保存这样的行为，这就是双向绑定带来的奇妙体验。

本篇讲述了AngularJS中的数据绑定，是不是很简单但也超级实用呢？

参考资料

AngularJS官方文档：https://docs.angularjs.org/api/

CodeSchool快速入门视频：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

CodeProject文章：http://www.codeproject.com/Articles/808257/Part-Data-Binding-In-AngularJS

相关文章