浅谈angularjs中响应回车事件


Posted in Javascript onApril 24, 2017

下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码)

<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-keyup="enterEvent($event)" />
<button ng-click="clickEvent()">test</button>
</body>
<script type="text/javascript">
var app = angular.module('myApp', [])
.controller('ctrl', function($scope){
  $scope.clickEvent = function() {
    $scope.text1 = "Hello world!";
  }
  
  $scope.enterEvent = function(e) {
    var keycode = window.event?e.keyCode:e.which;
    if(keycode==13){
      $scope.clickEvent();
    }
  }
  
});
</script>
</html>

以上这篇浅谈angularjs中响应回车事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
js简易版购物车功能
Jun 17 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
老生常谈angularjs中的$state.go
Apr 24 #Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 #Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 #Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 #Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 #Javascript
Javascript操作dom对象之select全面解析
Apr 24 #Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP的几个常用加密函数
2016/02/03 PHP
js验证是否为数字的总结
2013/04/14 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
python对象及面向对象技术详解
2016/07/19 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
python实现双人五子棋(终端版)
2020/12/30 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
就业推荐表自我鉴定
2014/03/21 职场文书
学校就业推荐信范文
2014/05/19 职场文书
中秋节寄语2015
2015/03/24 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Log4j.properties配置及其使用
2021/08/02 Java/Android