angularjs中使用$scope.$watch监控对象模型的变化

如果对象模型发生变化时,可以使用$scope.$watch监控变化

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-model-options="{ updateOn: ‘blur‘ }" />
<div>输入框内容改变次数:{{count}}</div>
</body>
<script type="text/javascript">
var app = angular.module(‘myApp‘, [])
.controller(‘ctrl‘, function($scope){
    $scope.count = 0;
    $scope.$watch(‘text1‘,function(){
        $scope.count++;
    });
});
</script>
</html>

稍微改一下,输出修改前后的内容:

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-model-options="{ updateOn: ‘blur‘ }" />
<div>输入框内容改变次数:{{count}}</div>
<div>原内容:{{content1}}</div>
<div>新内容:{{content2}}</div>
</body>
<script type="text/javascript">
var app = angular.module(‘myApp‘, [])
.controller(‘ctrl‘, function($scope){
    $scope.count = 0;
    $scope.$watch(‘text1‘,function(newValue,oldValue){
        $scope.count++;
        $scope.content1 = oldValue;
        $scope.content2 = newValue;
    });
});
</script>
</html>
时间: 2024-08-24 21:19:33

angularjs中使用$scope.$watch监控对象模型的变化的相关文章

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

后端接收不到AngularJs中$http.post发送的数据的问题

1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

Angularjs中的事件广播-浅谈$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat

AngularJS的作用域Scope

1.简介 angularjs启动并生成视图时,会根据ng-app元素和$RootScope进行绑定.$RootScope是所有$scope对象的最上层,是angularjs中最接近于全局作用域的对象. $scope对象就是一个普通的javascript对象,在angularjs中充当数据模型,但与传统的数据模型又不一样,$scope并不负责处理和数据操作,它只是视图和HTML之间的桥梁. $scope的所有属性都可以自动被视图访问到. 作用域是构成AngularJS应用的核心,它与应用的数据模型

Angularjs中this的指向

在Angularjs中this的指当前的scope. <a class=" ng-click="remove(this)"></a> <!--this指的是a标签作用域下的scope--> <script> app.controller('myCtrl',function($scope){ $scope.remove = function (scope) { scope.remove(); }; }); </script&

angular中的scope

angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执行上下文context.scopes模仿DOM的层次模型也有层次关系.Scopes可以watch一个expression也可以propagate events. scope特性 scope提供API $watch来观察模型的变化 scope提供API $apply来传播angular外部世界(比如c

关于AngularJs中监听事件及脏循环的理解

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

AngularJS中实现显示或隐藏动画效果的3种方式

本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-animage→依赖:var app = angular.module("app",["ngAnimate"]);→controller中一个变量接收bool值→界面中提供一个按钮,点击改变bool值→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,