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 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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动态创建Flash动画
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
销售总监工作职责
2013/11/21 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
小学数学国培感言
2014/03/10 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
葬礼主持词
2015/07/02 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang