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 相关文章推荐
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
手把手教你实现 Promise的使用方法
Sep 02 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 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python实现名片管理系统
2018/11/29 Python
python内存管理机制原理详解
2019/08/12 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2015国庆节宣传语
2015/07/14 职场文书
旅游安全责任协议书
2016/03/22 职场文书
自荐信范文
2019/05/20 职场文书