<div class="form-group">
<label for="pwd">Password</label>
<input id="pwd"
type="password"
class="form-control"
placeholder="Password"
ng-change="onChange()"
ng-model="user.password"> ---------------------------------
//ngChange
$scope.onChange=function(){
var newVal = $scope.user.password;
if (!newVal) return;
$scope.reqs = []; if (!isLongEnough(newVal)) {
$scope.reqs.push('Too short');
} if (!hasNumbers(newVal)) {
$scope.reqs.push('Must include numbers');
} $scope.showReqs = $scope.reqs.length;
}

For a form, when user type on the input field, both ngChange and $watch will get fired.

The difference between ngChange and $watch is :

ngChange:

If I click "Please Hack Me," you can see the value change but we don't get our warnings back.

            <button class="btn btn-danger"
ng-click="user.password = 'pwd'">Please Hack Me</button>

The reason for that is ng-change only reacts to changes in the actual form element that you have declared it on. If your value changes programmatically as the result of anything but actually interacting with the element ng-change is not going to fire.

$watch:

$watch is not recommended by Angular team, because it is expensive. In most cases, when monitor the form elements, we can use ngChange instead of $watch.

But for the case value changes programmatically, you have to use $watch.

[AngularJS] ng-change vs $scope.$watch的更多相关文章

  1. JavaScript外部函数调用AngularJS的函数、$scope

    x 场景: 需要在用FusionCharts画的柱状图中添加点击事件,But弹出框是Angularjs搞的,我想的是直接跳到弹出框的那个路由里,然后在弹出框的控制器中绑定数据即可: /* 点击事件 * ...

  2. Part 39 AngularJS route change events

    In this video we will discuss1. Different events that are triggered when a route change occurs in an ...

  3. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  4. part 4 AngularJS ng src directive

  5. 控制台获取AngularJS某个元素的Scope

    如何在控制台获取到某个元素的Scope呢? 假设,页面元素为: <label>Name:</label><input type="text" ng-m ...

  6. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  7. Part 34 AngularJS controller as vs scope

    There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. T ...

  8. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  9. AngularJS 3

    AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...

  10. 一步一步弄懂angularJS基础

    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...

随机推荐

  1. Mybatis源码分析之结果集处理

    解析封装 ResultMap 是和结果集相关的东西,最初在解析 XML 的时候,于 parseStatementNode 方法中,针对每一个 select 节点进行解析,转换为 MappedState ...

  2. nyoj 214 单调递增子序列(二)

    单调递增子序列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 ,a2...,an}(0<n<=100000),找出单调递增最长子序列,并求出其长度. ...

  3. FastReport.Net使用:[31]使用带参查询及存储

    带参查询 1.在数据列表中创建一个名为姓名的参数. 然后使用一个对话框,将文本框的ReportParameter(报表参数)选为参数中的姓名. 给童鞋们的一个题目:这里可以改为下拉框,学生列表从数据库 ...

  4. QTREEⅠ SPOJ

    树剖模板,注意把边化为点后要查到y的儿子. #include<bits/stdc++.h> using namespace std; ; int f[N],bel[N],w[N],id[N ...

  5. BZOJ 3238: [Ahoi2013]差异 后缀自动机 树形dp

    http://www.lydsy.com/JudgeOnline/problem.php?id=3238 就算是全局变量,也不要忘记,初始化(吐血). 长得一副lca样,没想到是个树形dp(小丫头还有 ...

  6. Nginx日志切割工具——logrotate 使用记录

    1.安装 logrotate是Linux系统自带,无需安装 2.配置 进入[/etc/logrotate.d/nginx]文件修改配置 # 需要备份的日志路劲,一个或多个都可以 /data/logs/ ...

  7. 并查集--CSUOJ 1601 War

    并查集的经典题目: CSUOJ 1601: War Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 247  Solved: 70[Submit][Sta ...

  8. 50.分治算法练习:  二分算法:  2703 奶牛代理商 XII

    时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 小徐从美国回来后,成为了USACO中国区的奶牛销售代理商,专门出售 ...

  9. bzoj1798 维护序列

    Description 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...

  10. php上传文件常见问题(基础)

    既然上一篇文章<php上传中文文件文件名乱码问题>遇到了文件上传的问题,干脆把php上传文件时经常碰到的几个问题总结一下吧,以后用到时不用再去找了. 1.先做个最简单的上传文件 <h ...