您的位置：首页 > Web前端 > AngularJS

AngularJS入门之数据绑定

2015-05-25 20:45 465 查看

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，这种写法更简便直观。

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

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。

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

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

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会自动忽略该内容。

使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航