AngularJS——第4章 数据绑定
第4章 数据绑定
- AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。
- 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。
4.1 单向绑定
- 单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。
- 只能模型（Model）数据向视图（View）传递
4.2 双向绑定
- 双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递。
4.3 相关指令
在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。
注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。
示例1：
<body ng-app="App">
<ul ng-controller="DemoController">
<li ng-bind="name"></li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{name}}{{age}}" ng-bind-template="string"></li>
</ul>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope 就是Model
$scope.name = 'itcast';
$scope.age = 10;
}]);
</script>
</body>
- 通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。
- 要实现数据从视图向模型绑定，需要借助于表单元素，并且只能是表单元素
初始化
- 通过ng-init可以初始化模型（Model）也就是$scope。
- 示例：
ng-init="name='zs';age=10"
为DOM元素添加事件
- AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。
数据筛选
- 通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。
AngularJS——第4章 数据绑定的更多相关文章
- AngularJS——第1章 简介
第1章 简介 由谷歌公司开发维护的前端MVC框架,克服了HTML在构建应用上的诸多不足,降低了开发成本,提高了效率. 一个框架 以数据和逻辑作为驱动 AngularJS核心特性:模块化,双数据绑定,语 ...
- AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用
AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我 ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- AngularJS——第11章 其它
第11章 其它 11.1jQuery 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element不能选择元素,但可以将一个DOM元素转成jQ ...
- AngularJS——第9章 模块加载
第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...
- AngularJS——第8章 服务
第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...
- AngularJS——第7章 依赖注入
第7章 依赖注入 AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 所谓依赖注入是指在运行时自动查找依赖关 ...
- AngularJS——第6章 作用域
第6章 作用域 在AngularJS中使用过滤器格式化展示数据,在"{{}}"中使用"|"来调用过滤器,使用":"传递参数. 6.1 内置过 ...
随机推荐
- css：margin和padding的百分之使用
#app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...
- [ SHELL编程 ] shell编程中数值计算方法实例
SHELL编程中经常会涉及到数值计算,有时候对于这些计算命令使用场景容易忘记或者混淆,这里针对常用的命令做个总结.主要包括let.bc.expr.(())等. 1.let 使用格式:let 表达式,表 ...
- 解决mysql从windows迁移到centos出现乱码问题
windows上的数据库编码情况 修改前centos上的编码情况 修改centos上mysql的配置文件my.cnf如下(修改前停掉mysql服务,/etc/init.d/mysqld stop) 红 ...
- TCP工作过程；TCP Flood的攻击的原理和现象；TCP协议设计的安全隐患与防范对策
TCP分三个阶段 连接建立(三次握手) 数据传输 连接释放(四次挥手) TCP工作过程 TCP连接建立阶段 第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给S ...
- mysql如何出查出最近7天，最近30天，最近n天的记录？
已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...
- HBase 1.2.6 完全分布式集群安装部署详细过程
Apache HBase 是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,是NoSQL数据库,基于Google Bigtable思想的开源实现,可在廉价的PC Server上搭建大规模结构化存 ...
- mab算法
https://zhuanlan.zhihu.com/p/21388070?refer=resyschina 专治选择困难症——bandit算法 改善:https://zhuanlan.zhihu.c ...
- CSS 所有样式属性大复习
1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; ...
- tomcat 修改jdk版本号
set JAVA_OPTS=-Djute.maxbuffer=2048000 set console_log=true set CATALINA_OPTS=-server -Xdebug -Xnoag ...
- String intern 方法 jdk中的描述
一个初始为空的字符串池,它由类 String 私有地维护. 当调用 intern 方法时,如果池已经包含一个等于此 String 对象的字符串(用 equals(Object) 方法确定),则返回池中 ...