$watch--angularJs的监听事件
来源:互联网 发布:北京上游网络怎么样 编辑:程序博客网 时间:2024/05/16 19:53
上一篇介绍了angular的一个应用----双向数据绑定,本篇介绍angular的另一个应用---监听事件,该监听功能是angular自带的,也比较实用。监听功能定义在了$scope里,前面说过,$scope就相当于作用域,表示在当前页面有效,当然, 你也可以把理解为一个空间或一个容器,angular的作者往这个容器里定义了很多方法,$watch就是其中之一。
所谓监听,就是指当被监听的对象发生了改变,就会自动的执行某一段代码,其中被监听的对象往往是一个变量。
下面是一个例子:
请输入:<input type="text" ng-model="content" /><br /><br />当前输入的值为:{{nowStr}}<br />上次输入的值为:{{oldStr}}<br />共改变了{{num}}次其中,content就是被监听的对象,它是一个变量。
var m = angular.module("webApp",[]);m.controller('ctrl',["$scope",function($scope){$scope.num = 0;$scope.$watch("content",function(newValue,oldValue){$scope.nowStr = newValue;$scope.oldStr = oldValue;$scope.num++;})}])
说明:该程序的结构比较简单,前面说了,$watch是定义在$scope里的(angular自带的方法,即服务都是以$开头的,所以watch前面一定要加上$,否则程序会报错,提示watch不是一个函数。),所以写成$scope.$watch,其中$watch里有2个参数,newValue代表当前的值(新),oldValue代表改变前的值(老)。参数名也不是非要写成newValue和oldValue,参数个数也是可以改变的,最多2个,可以1个,也可以没有,当只有一个参数时,只代表当前的值。
运行结果:
刚刚开始
可以看到,程序该运行的时候,$watch就执行了一次。
输入值,输入框的值一发生改变,框外的值就会跟着改变,这就是所谓的监听。
$watch的用处很多,最常用的就是省份、城市、地区的三级联动,下次给大家写一个地域的三级联动。
1 0
- $watch--angularJs的监听事件
- angularjs-watch 监视事件
- angularjs $watch监听模型变化
- angularjs的监听方法$watch、$watchGrou、$watchCollection的使用方法
- angularJS $scope的$watch方法监听model改变
- angularjs路由改变的事件监听
- AngularJS $watch的用法
- 深究AngularJS——监听模型$watch
- angularjs 用$watch监听模型变化
- zookeeper的watch事件反复监听实现细节
- vue1.0和vue2.0的watch监听事件写法
- angularJS添加事件监听
- angular的watch监听
- angularJS中$watch监听不到输入控件(input、textarea)的空格输入问题
- angularjs的$watch、$watchGroup、$watchCollection
- angular js 入门2 $watch 监听事件
- $watch监听多个值的变化
- AnjularJS框架的监听$watch
- R语言入门(4)时间序列分析
- Dubbo之——Eclipse调试Dubbox源码
- spring事物的五种配置
- Linux中的文件描述符与打开文件之间的关系
- Linux经典问题—五哲学家就餐问题
- $watch--angularJs的监听事件
- (八) IO
- 机器学习思维导图
- sublime text 3 快捷键
- Mac系统下Eclipse代码联想功能(代码助手,代码提示)快捷键
- Mysql大权
- Java多线程(四)
- php 如何将xml转为数组array
- CodeForces779C--Dishonest Sellers