AngularJs学习笔记4——四大特性之双向数据绑定
双向数据绑定
方向1：模型数据（model）绑定到视图（view）
实现方法：①.{{model变量名}} ②.常用指令（ng-repeat）
方向2：将视图（view）中用户输入的数据绑定到模型数据(model)
实现方法：ng-model指令，用在表单组件中（input select）
$watch()监听模型变量值的改变—>执行指定的方法
$watch(‘变量名’,function(){…});
一个很简单的栗子：
实时获取输入框中输入的内容，打印在控制台
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<!--通过ng-model把视图数据绑定到模型上，同时又通过{{}}的形式把模型数据绑定到视图上，实现双向数据绑定-->
<input type="text" ng-model="kw"/>
<p>{{kw}}</p>
<script>
var app = angular.module('myApp',['ng']);
app.controller('myCtrl', function ($scope) {
$scope.$watch('kw',function(){
console.log($scope.kw);
})
});
</script>
</body>
</html>
AngularJs学习笔记4——四大特性之双向数据绑定的更多相关文章
- AngularJs学习笔记2——四大特性之MVC
angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)- ...
- AngularJs学习笔记7——四大特性之模块化设计
模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...
- AngularJs学习笔记6——四大特性之依赖注入
压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...
- AngularJS学习笔记（三）数据双向绑定
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...
- AngularJS学习笔记(一) 关于MVVM和双向绑定
写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- mysql索引简单介绍
索引从本质上来说也是一种表,这样的表存储被列为索引的列项值和指向真正完整记录的指针.索引对用户透明.仅仅被数据库引擎用来加速检索真实记录.有索引的表.insert和update操作会耗费很多其它时间而 ...
- C#。3.1 循环（叠加、穷举）
循环. for 循环 嵌套的应用, 迭代.穷举 一.迭代法 每次循环都是从上次运算结果中获得数据,本次运算的结果都是要为下次运算做准备.例:1.100以内所有数的和. int sum = 0; for ...
- 自动生成 Lambda查询和排序，从些查询列表so easy
如下图查询页面,跟据不同条件动态生成lambda的Where条件和OrderBy,如果要增加或调整查询,只用改前台HTML即可,不用改后台代码 前台代码: <div style="pa ...
- 打印对象和toString方法
JAVA对象 java对象是都是Object类的实例,都可直接调用该类中定义的方法,这些方法提供了处理java对象的通用方法. > > 6.2.1打印对象和toString方法 先看 ...
- Arcgis Server ecp(许可)
Arcgis Server 10 许可(新建.txt文件,然后拷贝好以下内容,然后修改为 .ecp文件即可): 3dengine,100,ecp.arcgis.server,none,KGE784S1 ...
- SQL自连接（源于推荐算法中的反查表问题）
”基于用户的协同过滤算法“是推荐算法的一种,这类算法强调的是:把和你有相似爱好的其他的用户的物品推荐给你. 要实现该推荐算法,就需要计算和你有交集的用户,这就要用到物品到用户的反查表. 先举个例子说明 ...
- 解读CSS的背景（background）样式
background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background- ...
- Mysql中natural join和inner join的区别
假设有如下两个表TableA,TableB TableA TableB Column1 Column2 Column1 Column3 1 2 1 3 TableA的Column1列名和TableB的 ...
- 仿校内textarea输入框字数限制效果
这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...
- 安装JDK+Tomcat，进行环境变量设置，和运行JSP
系统:windows 7 64-bit 安装前需要用到的软件 JDK7u21 Tomcat 8.0 下载64-bit Windows zip就好 安装JDK7u21 和平常安装软件一样,路径也不要动, ...