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 MD4
Dec 20 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
解决django FileFIELD的编码问题
2020/03/30 Python
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
测试工程师岗位职责
2013/11/28 职场文书
小学老师寄语大全
2014/04/04 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
美丽人生观后感
2015/06/03 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python