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对象的property和prototype是什么一种关系
Aug 06 Javascript
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
js实现复制粘贴的两种方法
Dec 04 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&amp;mysql 日期操作小记
2012/02/27 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
高中课程设置方案
2014/05/28 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis