Angularjs的键盘事件的绑定
时间:2019-03-30
本文章向大家介绍Angularjs的键盘事件的绑定,主要包括Angularjs的键盘事件的绑定使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Angularjs的键盘事件的绑定
推荐button
方法一:ng内置指令
<button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button>
说明:在对应的控制器中的$scope上绑定一个todoSomething方法
$scope.todoSomething=function($event){ if($event.keyCode==13){//回车 login(); } }
方法二:自定义指令
html <button ng-click="login()" ng-enter="login()" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button>
指令
myApp.directive('ngEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if (event.which === 13) { scope.$apply(function () { scope.$eval(attrs.ngEnter); }); event.preventDefault(); } }); }; });
总结:两种方法都能实现敲回车登录的功能,不过推荐指令的方式,对$scope的污染比较低
关于AngularJS指令事件可以参考://www.jb51.net/article/119742.htm
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- hbase源码系列(十四)Compact和Split
- 设计模式学习(四): 1.简单工厂 (附C#实现)
- 从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD
- 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置
- RavenDb学习(十)附件,存储大对象
- 从头编写 asp.net core 2.0 web api 基础框架 (3)
- Distribute Cached 使用
- RavenDb学习(七) 异步工作以及维度查询
- RavenDb学习(五)结果转换
- sqoop 从sqlserver2008 导入数据到hadoop
- 从头编写 asp.net core 2.0 web api 基础框架 (2)
- hbase源码系列(四)数据模型-表定义和列族定义的具体含义
- RavenDb学习(四)处理文档相关性
- RavenDb学习(二)简单的增删查改
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 你对CSS权重真的足够了解吗?
- python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
- Js 的事件循环(Event Loop)机制以及实例讲解
- 你不知道的js中关于this绑定机制的解析[看完还不懂算我输]
- 解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
- 算法-查找斐波纳契数列中第 N 个数
- 在python中修改.properties文件的操作
- Django Xadmin多对多字段过滤实例
- 算法-姓名去重
- Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
- Python Opencv中用compareHist函数进行直方图比较对比图片
- 面试题-树状数组结构转化
- Xadmin+rules实现多选行权限方式(级联效果)
- Android仿主流壁纸App设置界面
- Android中WindowManager与WMS的解析