AngularJS基础 ng-focus 指令简单示例
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 的基础资料整理,后续继续补充。
相关推荐
-
AngularJS基础 ng-init 指令简单示例
AngularJS ng-init 指令 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> &
-
AngularJS控制器之间的数据共享及通信详解
AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a
-
AngularJS基础 ng-hide 指令用法及示例代码
AngularJS ng-hide 指令 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> &
-
AngularJS基础 ng-href 指令用法
AngularJS ng-href 指令 AngularJS 实例 使用 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> </hea
-
AngularJS基础 ng-disabled 指令详解及简单示例
AngularJS ng-disabled 指令 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> &
-
AngularJS基础 ng-include 指令示例讲解
AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!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>
-
AngularJS基础 ng-if 指令用法
AngularJS ng-if 指令 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> <b
-
AngularJS基础 ng-keydown 指令简单示例
AngularJS ng-keydown 指令 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>
-
AngularJS基础 ng-include 指令简单示例
AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!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>
-
AngularJs自定义服务之实现签名和加密
写在前面: AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zhihu.com/question/25539382) 对base64.md5.sha1加密算法
随机推荐
- php中base64_decode与base64_encode加密解密函数实例
- Java中类赋值的解释实例详解
- 初探Swift3.0带来的变化汇总
- 腾讯QQ php程序员面试题目整理
- php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
- PHP快速推送微信模板消息
- destoon官方标签大全
- 如何解决下拉菜单被flash覆盖的问题
- Powershell使用OpenFileDialog打开文件示例
- jQuery中:selected选择器用法实例
- JS中attr和prop属性的区别以及优先选择示例介绍
- 浅谈JS中的反柯里化( uncurrying)
- SpringMVC源码解读之 HandlerMapping - AbstractDetectingUrlHandlerMapping系列初始化
- implicit关键字做自定义类型隐式转换的方法
- 23种设计模式(16)java访问者模式
- vue在手机中通过本机IP地址访问webApp的方法
- 详解java解决分布式环境中高并发环境下数据插入重复问题
- Vue2.0 实现歌手列表滚动及右侧快速入口功能
- jQuery EasyUI 选项卡面板tabs的使用实例讲解
- python2.7无法使用pip的解决方法(安装easy_install)