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 forEach通用循环遍历方法
Oct 11 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
原生JS实现pc端轮播图效果
Dec 21 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实现图片简单上传
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Django中使用locals()函数的技巧
2015/07/16 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python tkinter实现连连看游戏
2020/11/16 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
拉拉队口号
2014/06/16 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
西游降魔篇观后感
2015/06/15 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
instantclient客户端 连接oracle数据库
2022/04/26 Oracle