AngularJS基础 ng-focus 指令简单示例


Posted in Javascript onAugust 01, 2016

AngularJS ng-focus 指令

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

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

<h1>{{count}}</h1>

<p>该实例在输入框每次获取焦点时,计算变量 "count" 会自动加 1。</p>

</body>
</html>

该实例在输入框每次获取焦点时,计算变量 "count" 会自动加 1。

定义和用法

ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时,ng-focus 表达式与原始的 onfocus 事件将都会执行。

语法

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

<a>, <input>, <select>, <textarea>, 和 window 对象都支持该指令。

参数值

描述
expression 元素获取焦点时执行的表达式。

以上就是对Angular ng-focus 的基础资料整理,后续继续补充。

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
浅谈es6中的元编程
Dec 01 Javascript
JavaScript中的对象继承关系
Aug 01 #Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 #Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 #Javascript
jQuery简单实现title提示效果示例
Aug 01 #Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
jQuery获取与设置iframe高度的方法
Aug 01 #Javascript
You might like
php判断一个数组是否为有序的方法
2015/03/27 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python多进程间通信代码实例
2019/09/30 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
文明单位汇报材料
2014/12/24 职场文书
办公室个人总结
2015/02/28 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2016年校长新年寄语
2015/08/17 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书