AngularJS ng-blur 指令详解及简单实例_AngularJS

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 指令知识的简单讲解,后续继续补充,谢谢支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angularjs
, 指令详解
, ng-blur
指令实现
angularjs ng if 实例、angularjs ng指令、angularjs 指令详解、angularjs ng repeat、angularjs ng if,以便于您获取更多的相关知识。

时间: 2024-12-21 14:59:24

AngularJS ng-blur 指令详解及简单实例_AngularJS的相关文章

AngularJS基础 ng-disabled 指令详解及简单示例_AngularJS

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-change 指令的详解及简单实例_AngularJS

AngularJS ng-change 指令 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-list 指令详解及示例代码_AngularJS

AngularJS ng-list 指令 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

AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

AngularJS 模块详解及简单实例_AngularJS

AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "m

AngularJS 依赖注入详解和简单实例_AngularJS

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会

Android Build类的详解及简单实例

Android Build类的详解及简单实例 一.类结构: java.lang.Object ? android.os.Build 二.类概述:从系统属性中提取设备硬件和版本信息. 三.内部类: 1.Build.VERSION 各种版本字符串 2.Build.VERSION_CODES 目前已知的版本代码的枚举类 四.常量:UNKNOWN 当一个版本属性不知道时所设定的值.其字符串值为 unknown . 五.构造方法: Build () 六.静态属性 1.BOARD 主板:The name o

Android 中Seekbar详解及简单实例

Android 中Seekbar详解及简单实例 做到音频播放和音乐播放时,大多数都要用到Seekbar.现在我先简单介绍下Seekbar的几个重要属性. android:max 设置值的大小 . android:thumb="@drawable/" 显示的那个可拖动图标,如果没有设置该参数则为系统默认,如果自己需要重新定义,则将自己需要的图标存放在资源目录 /res/drawable下,然后调用即可. android:thumbOffset 拖动图标的偏量值,可以让拖动图标超过bar的

AngularJs Forms详解及简单示例_AngularJS

      控件(input.select.textarea)是用户输入数据的一种方式.Form(表单)是这些控件的集合,目的是将相关的控件进行分组. 表单和控件提供了验证服务,所以用户可以收到无效输入的提示.这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误.请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的.服务端验证对于一个安全的应用来说仍然是必要的. 一.Simple form 理解双向数据绑定的关键dire