AngularJS ng-blur 指令详解及简单实例


Posted in Javascript onJuly 30, 2016

AngularJS ng-blur 指令

AngularJS 实例

当输入框失去焦点(onblur)时执行表达式:

<!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="">

<input ng-blur="count = count + 1" ng-init="count=0" />

{{count}}

<p>实例中 "count" 变量记录了失去焦点的次数。</p>

</body>
</html>

运行结果:

 

0

实例中 "count" 变量记录了失去焦点的次数。

 定义和用法

ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。
AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件, 如果触发该事件,ng-blur 表达式与原生的 onblur 事件都会执行。

语法

<element ng-blur="expression"></element>

<a>, <input>, <select>, <textarea>,窗口对象支持。

参数值

 

描述
expression 失去焦点时执行的表达式。

 以上就是对AngularJS ng-blur 指令知识的简单讲解,后续继续补充,谢谢支持!

Javascript 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
微信小程序radio组件使用详解
Jan 31 Javascript
vue写一个组件
Apr 09 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
详解js中的apply与call的用法
Jul 30 #Javascript
javascript回到顶部特效
Jul 30 #Javascript
You might like
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python3模拟curl发送post请求操作示例
2019/05/03 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python绘图模块之利用turtle画图
2021/02/12 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
自考生自我鉴定范文
2013/10/01 职场文书
个人求职信范文分享
2014/01/06 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书