AngularJS入门之数据绑定
本篇我们看一下AngularJS中的数据绑定。虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了!
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>
上面的代码就展示了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
转载于:https://www.cnblogs.com/wushangjue/p/4526439.html
AngularJS入门之数据绑定相关推荐
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- WPF入门:数据绑定
原文:WPF入门:数据绑定 上一篇我们将XAML大概做了个了解 ,这篇将继续学习WPF数据绑定的相关内容 数据源与控件的Binding Binding作为数据传送UI的通道,通过INotityProp ...
- AngularJS 入门6-路由
AngularJS 入门6-路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发 实例: //HTML ...
- AngularJS学习笔记之一: AngularJS入门
2019独角兽企业重金招聘Python工程师标准>>> 一.AngularJS是什么? AngularJS是由Misko Hevery 和 Adam Abrons 两个人共同创建 ...
- AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
- angularjs中的数据绑定
这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...
最新文章
- PowerDesigner15对SQLSERVER2008S数据库进行反向工程出错
- 只导出项目需要的pip依赖包-方法的缺陷
- cat查看tomcat日志 linux_方法篇:tomcat日志切割和定期删除
- Python3 OOP(四) 获取对象信息
- 论文阅读 - Beat Tracking by Dynamic Programming
- 从0开始学java视频_Java全套学习视频放送,从零开始一步步掌握Java技能!
- XML类型的SQL参数
- Tcl Tutorial 笔记8 · proc
- srs2.0安装问题
- mongodb 集群shard_MongoDB分片集群部署详解
- pyqt5菜鸟教程_PyQt5教程(一)——第一个PyQt5程序
- 爬虫IP代理-设置ADSl拨号服务器代理
- 无头浏览器介绍和对比
- 【记录】螺栓连接——预紧力
- 叫你怎么设置手机成空号
- The right to contest automated decisions under the General Data Protection Regulation: Beyond the so
- iOS 视频直播技术
- Java 学习总结 Week2
- 如何使用外部控件来管理Web报表属性
- PS5连接OPPO K9电视不支持2160P/4K
热门文章
- pytorch入门-简介及安装
- 云计算odps使用笔记(一)环境搭建
- 遥感、制图学中各种图的区别
- python自动发送邮件_Python自动发送邮件
- java注解返回不同消息,SpringMVC源码剖析5:消息转换器HttpMessageConverter与@ResponseBody注解...
- 聊天机器人-AIML人工智能标记语言
- python 大众点评模拟登陆_python项目实战:模拟登陆163邮箱,简单到爆
- python 字符串匹配like_python中关于正则表达式一
- NLOPT ros下的使用
- axios在派遣方法时候的异步