AngularJs ng-change事件/指令的用法小结


Posted in Javascript onNovember 01, 2017

本文介绍了AngularJs ng-change事件/指令的小结,分享给大家,也给自己留个笔记

定义和用法

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>

  1. <input>, <select>, 和  <textarea> 元素支持。
  2. <radio>,<checkbox>

参数值

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

实例说明:当输入框的值改变时执行函数:

<body ng-app="myApp">

<div ng-controller="myCtrl">
 <input type="text" ng-change="myFunc()" ng-model="myValue" />
 <p>The input field has changed {{count}} times.</p>
</div>

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

</body>

实例说明,radio和checkbox

注:checkbox ng-model总是是true或false,而不是value,其他的ng-model默认都是value 的值

HTML

<h3>Radio 控件测试</h3> 
<p><label> 
  <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" /> 
  男 
 </label> 
 <label> 
  <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" /> 
  女 
 </label></p> 
<h3>checked 控件测试</h3> 
<p><div class="checkbox"> 
  <label> 
   <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" /> 
   同意协议 
  </label> 
 </div> 
 <div class="checkbox"> 
  <label> 
   <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" /> 
   同意协议2 
  </label> 
 </div></p>

JS:

var app = angular.module('myApp', []); 
app.controller('validateCtrl', function ($scope) { 
 //randio ng-change事件和原始onchange相同 
 //radio ng-model 的值是value 
 $scope.radioChecked = function () { 
  console.info($scope.value1); 
 } 
 //checkbox ng-change事件和原始onchange相同 
 //checkbox ng-model总是是true或false 
 $scope.checkboxClick = function () { 
  console.info($scope.value2); 
 } 
});

实例说明,text,select

HTML

<form class="form-horizontal"> 
 <div class="form-group"> 
  <label class="control-label">姓名:</label> 
  <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> 
 </div> 
 <div class="form-group"> 
  <label class="control-label">选择年级:</label> 
  <select class="form-control" ng-change="selectChange();" ng-model="grade"> 
   <option value="1">一年级</option> 
   <option value="2">二年级</option> 
  </select> 
 </div> 
</form>

JS

var app = angular.module('myApp', []); 
app.controller('validateCtrl', function ($scope) { 
 //textbox 的ng-change事件和原始ng-change不相同,而是和$scope.$watch()监听相同 
 //textbox 的ng-model为当前输入框的内容,为value值 
 $scope.txtChange = function () { 
  console.info($scope.name); 
 } 
 //select 的ng-change事件和原始ng-change相同 
 //ng-model 的默认情况下ng-model的结果为value值 
 $scope.selectChange = function () { 
  console.info($scope.grade); 
 } 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
You might like
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
原生JS实现留言板
2020/03/26 Javascript
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
信息部岗位职责
2013/11/12 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
经营管理策划方案
2014/05/22 职场文书
入党现实表现材料
2014/12/23 职场文书
教师考核评语大全
2014/12/31 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python