AngularJS中$watch
$watch在digest执行时,如果watch观察的value与上一次执行时不一样时,就会被触发。
angularjs内部的watch实现了页面随model的及时更新。
$watch 方法在用的时候主要是手动监听一个对象,但对象发生变化时触发某个对象。
语法:$watch(watchFn,watchAction,deepWatch);
$scope.data = {
name:"李四",
count: 20
};
此时data里的name和count都要监听,那么可以这么写:
$scope.$watch('data',function(){
//code code
},true)
如果不加第三个参数,那么只会监听data,所以当data引用改变时才会触发。
因此当需要监听一些引用对象时需要设置第三个参数为true。
angularjs:
app.controller("firstController",["$scope", function ($scope) {
$scope.name = "张三";
$scope.count = 0;
//监听一个 model 当一个 model 每次改变时 都会触发第二个函数
$scope.$watch("name",function (newValue, oldValue) {
++$scope.count;
if($scope.count > 3){
$scope.name = '已经大于3次了';
}
});
}]);
html:
<div ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
改变次数:{{count}}-{{name}}
</div>
AngularJS中$watch的更多相关文章
- 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- bootstrap tooltips在 angularJS中的使用
使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <in ...
- angularJS实践过程中出现的问题总结
同名服务 在一次项目里,之前是同事写的.我有一次在异步获取服务器上的数据时,习惯把api地址写在一个服务Store里,但是程序总是返回Store.api.get()里的get is undefined ...
- ANGULARJS 动态编译添加到dom中
在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示. 使用 方法如下: <html ng-app="app"> <he ...
- AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)
AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...
- 使用AngularJS开发中的几个问题
1.AngularJS的模板绑定机制好像和其$http服务也有一定关系,如果用jQuery Ajax的返回值赋给$scope的作用域变量,整个绑定显示的节奏慢一个事件,神器果然麻烦啊. 2.对hidd ...
- 【问题:发现与解决】angularJs指令在dijit控件中的使用
由于公司主要用的JS框架是DOJO,最近又运用了angularJs.因此,不可能避免的遇到dojo控件和angular指令(directive)共用时遇到的一些问题,问题如下: <input ...
- angularJs 模拟jQuery中的this
在angularJs中,this指向$scope!可以$event配合使用$(event.target)实现,代码如下: HTML部分: <p ng-click="testClick( ...
- 实例解说AngularJS在自动化测试中的应用
一.什么是AngularJS ? 1.AngularJS是一组用来开发web页面的框架.模板以及数据绑定和丰富UI的组件: 2.AngularJS提供了一系列健壮的功能,以及将代码隔离成模块的方法: ...
随机推荐
- linux Ubuntu Kali 安装flash
http://jingyan.baidu.com/article/fa4125accdeeec28ad709252.html
- day 4 继承
1.继承引入,减少代码量 1)版本1: class Animal: '''定义一个动物类''' def eat(self): print("----吃----") def drin ...
- day 8 list列表
列表 添加新的元素 append() 排队 insert() 插队 extend() 两队合成一队,狗尾续貂 删除元素 pop() ------> 删除最后一个 remove() ----> ...
- Drupal7 配置多站点及为每个站点设置语言
默认情况 在Drupal7的安装目录下存在sites目录 sites目录结构如下: --all --default --example.sites.php --README.txt 1. 添加新域名, ...
- cogs2109 [NOIP2015] 运输计划
cogs2109 [NOIP2015] 运输计划 二分答案+树上差分. STO链剖巨佬们我不会(太虚伪了吧 首先二分一个答案,下界为0,上界为max{路径长度}. 然后判断一个答案是否可行,这里用到树 ...
- Centos7部署Kubernetes集群(单工作节点)+配置dashboard可视化UI
目标:docker+kubernetes+cadvosor+dashboard 一:物理硬件 两台虚拟机(centos7):一台做为主节点(master),一台做为工作节点(node) [root@M ...
- 【视频编解码·学习笔记】4. H.264的码流封装格式 & 提取NAL有效数据
一.码流封装格式简单介绍: H.264的语法元素进行编码后,生成的输出数据都封装为NAL Unit进行传递,多个NAL Unit的数据组合在一起形成总的输出码流.对于不同的应用场景,NAL规定了一种通 ...
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 JSHint 问题检测工具
JSHint(jshint.com)是 Javascritp 代码质量工具,可以帮助开发人员发现 Javascript 代码中的错误和潜在的问题.jshint.com 是一个在线编辑器,我们可以为 S ...
- 2.airflow参数简介
比较重要的参数: 参数 默认值 说明 airflow_home /home/airflow/airflow01 airflow home,由环境变量$AIRFLOW_HOME决定 dags_folde ...
- mongodb redis memcache 对比
从以下几个维度,对 Redis.memcache.MongoDB 做了对比. 1.性能 都比较高,性能对我们来说应该都不是瓶颈. 总体来讲,TPS 方面 redis 和 memcache 差不多,要大 ...