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 相关文章推荐
jQuery随机切换图片的小例子
Apr 18 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python关于反射的实例代码分享
2020/02/20 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python定时截屏实现
2020/11/02 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
家长会演讲稿范文
2014/01/10 职场文书
开业庆典答谢词
2014/01/18 职场文书
社区中秋节活动方案
2014/01/29 职场文书
争先创优活动总结
2014/08/27 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
如何Python使用re模块实现okenizer
2022/04/30 Python