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 相关文章推荐
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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 源代码压缩小工具
2009/12/22 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python 处理数据的实例详解
2017/08/10 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python无序链表删除重复项的方法
2020/01/17 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python和php学习哪个更有发展
2020/06/17 Python
浅析Python requests 模块
2020/10/09 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
文员个人的求职信范文
2013/09/26 职场文书
村干部承诺书
2014/03/28 职场文书
自强之星事迹材料
2014/05/12 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server