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
AngularJS入门之数据绑定的更多相关文章
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- (一)Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- 跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- AngularJS入门篇
AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...
- AngularJS入门教程
1. 简介:AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是 ...
随机推荐
- 2018.10.20 NOIP模拟 面包(数学期望)
传送门 把方差的式子拆开. 方差=平方的期望-期望的平方. 显然只用维护点对的个数和总方案数就行了. 利用分步的思想来统计. 要统计覆盖一个矩形(x1,y1,x2,y2)(x1,y1,x2,y2)(x ...
- 2018.09.30 bzoj2821: 作诗(Poetize)(分块)
传送门 分块经典题目. 先将数列分块. 然后预处理出每两个块之间有多少个数出现了正偶数次. 这样查询的时候对于中间的完整块直接用预处理出的数组搞定. 剩下的暴力枚举求解. 代码: #include&l ...
- 基于zookeeper的主备切换方法
继承CZookeeperHelper即可快速实现主备切换: https://github.com/eyjian/libmooon/blob/master/include/mooon/net/zooke ...
- Spring源码解析 - BeanFactory接口体系解读
不知道为什么看着Spring的源码,感触最深的是Spring对概念的抽象,所以我就先学接口了. BeanFactory是Spring IOC实现的基础,这边定义了一系列的接口,我们通过这些接口的学习, ...
- HDU1518 Square(DFS) 2016-07-24 15:08 49人阅读 评论(0) 收藏
Square Problem Description Given a set of sticks of various lengths, is it possible to join them end ...
- hdu 4888 最大流慢板
http://acm.hdu.edu.cn/showproblem.php?pid=4888 添加一个源点与汇点,建图如下: 1. 源点 -> 每一行对应的点,流量限制为该行的和 2. 每一行对 ...
- cheerio笔记
不会的东西,再简单都是难:会的东西,再难都是简单. 给自己写的,写的通俗易懂. cheerio:在node服务端,解析网页,是jquery的核心,去除了DOM中不一致的地方. 先获得网页的源码,再通过 ...
- java socket编程(也是学习多线程的例子)详细版----转
7.2 面向套接字编程 我们已经通过了解Socket的接口,知其所以然,下面我们就将通过具体的案例,来熟悉Socket的具体工作方式 7.2.1使用套接字实现基于TCP协议的服务器和客户机程序 ...
- ASP.Net Core 2.2 MVC入门到基本使用系列 (一)
本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...
- 蚂蚁男孩.缓存组件(Framework.Mayiboy.Caching)
它能做什么? 主要是用来方便使用缓存而诞生,该组件封装了RunTimeCache.Memcached.Redis的使用,通过简单配置就能高效快速使用起来. 使用说明 一. 下载源码,自己手动编译 ...