AngularJS ng-change 指令的详解及简单实例


Posted in Javascript onJuly 30, 2016

AngularJS ng-change 指令

AngularJS 实例

当输入框的值改变时执行函数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
 <p>在输入框中输入一些信息:</p>
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p>输入框已经修改了 {{count}} 次。</p>
</div>

<script>
 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.count = 0;
   $scope.myFunc = function() {
    $scope.count++;
   };
  }]);
</script>
</body>
</html>

运行结果:

 在输入框中输入一些信息:

输入框已经修改了 0 次。

定义和用法

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。

语法

<element ng-change="expression"></element>

<input>, <select>, 和  <textarea> 元素支持。

参数值

描述
expression 元素值改变时执行表达式。

以上就是对AngularJS ng-change 指令的知识整理,后续继续补充。

Javascript 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
浅析js封装和作用域
Jul 09 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
AngularJS ng-bind-template 指令详解
Jul 30 #Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 #Javascript
AngularJS ng-bind 指令简单实现
Jul 30 #Javascript
AngularJS ng-app 指令实例详解
Jul 30 #Javascript
如何检测JavaScript的各种类型
Jul 30 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python代码缩进和测试模块示例详解
2018/05/07 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python求解汉诺塔游戏
2020/07/09 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
财务主管的岗位职责
2013/12/30 职场文书
销售人员获奖感言
2014/02/05 职场文书
员工工作自我评价
2014/09/26 职场文书
承租经营合作者协议书
2014/10/01 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
经理岗位职责范本
2015/04/15 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers