Angular - - ng-focus、ng-blur
1、ng-focus
这个指令功能就是比如当一个input等获取到焦点的时候,执行你指定的表达式函数,达到你需要的目的
格式:ng-focus=“value”
value:获取焦点时执行的表达式,方法。
2、ng-blur
这个指令功能就是比如当一个input等失去焦点的时候,执行你指定的表达式函数,达到你需要的目的。
格式:ng-blur=”value”
value: 失去焦点时执行的表达式。
一般ng-focus和ng-blur 同时使用
<div ng-app="Demo">
<div ng-controller="testCtrl">
<input ng-focus="fn()" ng-blur="fn1()" ng-model="inputValue">
</div>
</div>
<script>
angular.module("Demo",[]).controller("testCtrl",function($scope){
$scope.inputValue = '';
$scope.fn=function(){ $scope.inputValue = "Hello!!"
}
$scope.fn1=function(){ $scope.inputValue = "World!!"
}
}); </script>
效果展示:



Angular - - ng-focus、ng-blur的更多相关文章
- focus、blur事件的事件委托处理(兼容各个流浏览器)
今天工作中遇到个问题,问题是这样的,一个form表单中有比较多的input标签,因为form中的input标签中的值都需要前端做客户端校验,由于本人比较懒而且特不喜欢用循环给 每个input元素添加b ...
- focus、input、keydown、keyup、change、blur方法的差异
focus.input.keydown.keyup.change.blur方法的差异: https://blog.csdn.net/yiifaa/article/details/52372022 bl ...
- 001——Angular环境搭建、运行项目、搭建项目
1.安装node.js 和cnpm 2.cnpm install -g @angular/cli 安装angular脚手架: 3.ng new angulardemo cd angulardemo ...
- chrome控制台模拟hover、focus、active等状态,方便调试
有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...
- angular之$watch、$watchGroup、$watchCollection
1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须 ...
- angular之$broadcast、$emit、$on传值
文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...
- angular 的 @Input、@Output 的一个用法
angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...
- css的input文本框的 propertychange、focus、blur
1.输入框检查的需求--即时搜索--解决方案 当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变.(I ...
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- jQuery focus、blur事件 添加、删除类名
jQuery.focusblur = function(ele,className){ var focusblurid = $(ele); focusblurid.focus(function(){ ...
随机推荐
- python日期加减法操作
对日期的一些操作: 对日期的一些操作: 1 #日期转化为字符串并得到指定(或系统日期)n天后的日期--@Eillot 2 def dataTimeToString(dsNow=ReservationT ...
- kafka安装步骤
kafka 安装内存会报不够 https://stackoverflow.com/questions/9350437/incompatible-initial-and-maximum-heap-siz ...
- 实验一:C++简单程序设计
[实验一] #2-28 实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除,S表示排序 ...
- 玩转spring boot——负载均衡与session共享
前言 当项目上线后,如果要修复bug或扩充功能,都需要重启tomcat服务.此时,正在使用应用的用户们就需要等待服务器的重启,而这就会造成不好的用户体验.还有,当仅仅只有一台tomcat服务时,如果 ...
- PTA第三个编程题总结
7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块 ...
- SpringDataJpa开发环境的搭建以及使用
一.所需工具 安装jdk.IntelliJ IDEA和mysql数据库. 二.SpringDataJpa快速起步 开发环境的搭建: ①.在IDEA软件上添加依赖包:在http://mvnreposit ...
- IP通信基础学习第二周
此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...
- Docker Kubernetes Service 网络服务代理模式详解
Docker Kubernetes Service 网络服务代理模式详解 Service service是实现kubernetes网络通信的一个服务 主要功能:负载均衡.网络规则分布到具体pod 注 ...
- [C++ Primer Plus] 第3章、处理数据(一)程序清单
一.程序清单3.1(变量的一些知识点) #include<iostream> #include<climits> using namespace std; void main( ...
- 剑指offer(42)和为S的字符串
题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 题目 ...