angularjs 中的 ng-ag捕鱼王app官网

我们将通过示例在 angularjs 中介绍 ng-keypress。

在 angularjs 中使用 ng-keypress

在处理 angularjs 应用程序时，有很多情况下我们需要在按键上分配行为。要在按键上应用自定义行为，我们必须在 angularjs 中使用 ng-keypress 指令。

angularjs 的 ng-keypress 指令不会取代按键场合特有的组件； 两者都将被执行。这由 、</code> 元素支持。</p> <p> 语法：</p> <pre> <code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">ng-keypress</span>=<span class="hljs-string">"behavior"</span>></span> </code></pre> <p> <code>"behavior"</code> 将决定当按键被按下时要做什么。</p> <p> 让我们举个例子并使用这个 <code>ng-keypress</code> 指令。首先，我们将在 <code>index.html</code> 中创建视图。</p> <p> 代码 - <code>index.html</code>：</p> <pre> <code class="language-html hljs language-xml"><span class="hljs-meta"><!doctype <span class="hljs-keyword">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>ng-keypress directive by rana hasnain<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>= <span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</span>></span> <span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"app.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align:center"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"ngapp"</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"ngcontroller"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:blue"</span>></span> jiyik.com <span class="hljs-tag"></<span class="hljs-name">h1</span>></span> enter name: <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">ng-keypress</span>=<span class="hljs-string">"getkeyval($event)"</span> ></span> <span class="hljs-tag"><<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:green;"</span>></span> code of key is: {{valkey}} <span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p> 接下来，我们创建一个函数来获取 <code>app.js</code> 中的键值。</p> <p> 代码 - <code>app.js</code>：</p> <pre> <code class="language-javascript hljs"><span class="hljs-keyword">var</span> app = angular.<span class="hljs-title function_">module</span>(<span class="hljs-string">'ngapp'</span>, []); app.<span class="hljs-title function_">controller</span>(<span class="hljs-string">'ngcontroller'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">$scope</span>) { $scope.<span class="hljs-property">getkeyval</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) { $scope.<span class="hljs-property">valkey</span> = event.<span class="hljs-property">keycode</span>; } }); </code></pre> <p> 输出：</p> <p> <img alt="" src="https://www.jiyik.com/uploads/230313/i_20230313222850cea2e5.gif" style="width: 420px; height: 140px;" /></p> </div> <div class="blank15"></div> <div class="pre-next pre-next-art"> <p>上一篇：<a href='/tm/xwzj/web_1288.html' title='angular ngoninit 中的async/await使用 typescript 装饰器'>angular ngoninit 中的async/await使用 typescript 装饰器</a> </p> <p>下一篇：<a href='/tm/xwzj/web_3367.html' title='angular ngoninit 中的async/await使用 typescript 装饰器'>限制 angularjs 中的自定义指令</a> </p> </div> <div class="blank15"></div> <div class="dashed-border"></div> <style> .responsive_ad1 { display:inline-block;} @media (max-width: 500px) { .responsive_ad1,.ads { display:none; } } @media(min-width: 800px) { .responsive_ad1 { width: 870px; height: 100px; } } </style> <div class="ads" style="padding:15px 0;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9072260435000715" crossorigin="anonymous"></script> <ins class="adsbygoogle responsive_ad1" style="min-width:320px;max-width:870px;width:100%;height:100px;" data-ad-client="ca-pub-9072260435000715" data-ad-slot="4373662571" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="blank15"></div> <div class="dashed-border"></div> <div class="pre-next"> <p>转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处</p> <p class="arcurl">本文地址：<a href=""></a></p> </div> <div class="blank15"></div> <div class="dashed-border"></div> <section class="mt15"> <div class="module_hd"> <h2>相关文章</h2> </div> <article> <div class="art-model"> <h3><a href="/en/xwzj/web_9490.html" target="_blank">do you understand javascript closures?</a></h3> <p class="dateview"> <span>发布时间：2025/02/21</span> <span>浏览次数：108</span> <span>分类：<a href='/en/infinite/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">the function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. a closure itself is a core concept in javascript, and being a core concept, it is naturally also a difficult one.</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/en/xwzj/web_9489.html" target="_blank">do you know about the hidden traps in variables in javascript?</a></h3> <p class="dateview"> <span>发布时间：2025/02/21</span> <span>浏览次数：178</span> <span>分类：<a href='/en/infinite/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">whether you're just starting to learn javascript or have been using it for a long time, i believe you'll encounter some traps related to javascript variable scope. the goal is to identify these traps before you fall into them, in order to av</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/en/xwzj/web_9488.html" target="_blank">how much do you know about the prototype chain?</a></h3> <p class="dateview"> <span>发布时间：2025/02/21</span> <span>浏览次数：150</span> <span>分类：<a href='/en/infinite/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">the prototype chain can be considered one of the core features of javascript, and certainly one of its more challenging aspects. if you've learned other object-oriented programming languages, you may find it somewhat confusing when you start</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9212.html" target="_blank">jquery 中的日期选择器</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：99</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">本文将讨论使用 jquery ui 库的 jquery 中的 datepicker。</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9211.html" target="_blank">用 jquery 检查复选框是否被选中</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：102</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">在本教程中学习 jquery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 dom 操作、提取 javascript 属性的 jquery 方法以及使用 jquery 选择器的不同方法。你还将找到许多有用的</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9210.html" target="_blank">jquery 中的 $.ajax 数据类型</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：133</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">本教程演示了在 jquery 中使用 $.ajax 数据类型。</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9209.html" target="_blank">在 jquery 中检查字符串是否包含子字符串</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：106</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">本教程演示了如何在 jquery 中使用 contains() 方法。</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9208.html" target="_blank">在 jquery 中检查和取消检查复选框</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：94</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">本文演示了如何使用 jquery 选中和取消选中复选框。</p> </dd> </dl> </div> </article> <article> <div class="art-model"> <h3><a href="/tm/xwzj/web_9207.html" target="_blank">jquery 中的 window.onload 与 $(document).ready</a></h3> <p class="dateview"> <span>发布时间：2024/03/24</span> <span>浏览次数：180</span> <span>分类：<a href='/tm/xwzj/web/javascript/'>javascript</a></span> </p> <dl class="img-txt"> <dd> <p class="deatil">本教程演示了如何在 jquery 中使用 window.onload 和 $(document).ready 事件。</p> </dd> </dl> </div> </article> </section> </article> </div> <div class="right_wrap"> <section class="module_white mt15 ew_wrap boxshadow"> <div><img src="/static/jiyi/v3/img/ew.jpg"/></div> <h2>扫一扫阅读全部技术教程</h2> <h2> <div class="sjzh"> <span>社交账号</span> <ul class="sjzh_con"> <li> <a href="https://www.github.com/onmpw" target="_blank" class="iconfont"></a> <span class="sj_img ">https://www.github.com/onmpw</span> </li> <li> <a class="iconfont"></a> <span class="sj_img sj_qq">qq:1244347461</span> </li> <li> <a class="iconfont"></a> <span class="sj_img sj_wx"><img src="/static/jiyi/v3/img/wx.jpg" width="150" height="150"></span> </li> </ul> </div> </h2> </section> <section class="mt15" style="font-size:0;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9072260435000715" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:288px;height:288px" data-ad-client="ca-pub-9072260435000715" data-ad-slot="9434417561"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </section> <section class="module_white mt15 boxshadow"> <div class="module_hd"> <h2><span class="iconfont"></span>最新推荐</h2> </div> <ul class="tj_list"> <li><a href="/tm/xwzj/web_82.html" target="_blank" title="带你进入angular js的大门">带你进入angular js的大门</a></li> <li><a href="/tm/xwzj/web_3370.html" target="_blank" title="在 angular 中使用 @input()">在 angular 中使用 @input()</a></li> <li><a href="/tm/xwzj/web_3387.html" target="_blank" title="在 angularjs 中的控制器之间共享数据">在 angularjs 中的控制器之间共享数据</a></li> <li><a href="/tm/xwzj/web_3409.html" target="_blank" title="angular service 和 angular factory 的区别">angular service 和 angular factory 的区别</a></li> <li><a href="/tm/xwzj/web_3392.html" target="_blank" title="在 angularjs 中显示图像">在 angularjs 中显示图像</a></li> <li><a href="/tm/xwzj/web_3367.html" target="_blank" title="限制 angularjs 中的自定义指令">限制 angularjs 中的自定义指令</a></li> <li><a href="/tm/xwzj/web_3385.html" target="_blank" title="从 angular 中的子控制器访问父范围">从 angular 中的子控制器访问父范围</a></li> <li><a href="/tm/xwzj/web_3372.html" target="_blank" title="angular 中的对象数组及其工作原理">angular 中的对象数组及其工作原理</a></li> <li><a href="/tm/xwzj/web_3403.html" target="_blank" title="angularjs 中的指令链接函数">angularjs 中的指令链接函数</a></li> </ul> </section> <section class="module_white mt15 boxshadow"> <div class="module_hd"> <h2><span class="iconfont"></span>教程更新</h2> </div> <ul class="tj_list"> <li> <a href="/w/nextjs/nextjs-impreative-routing" target="_blank" title="next.js 命令式(imperative)路由"> next.js 命令式(imperative)路由 </a> </li> <li> <a href="/w/nextjs/nextjs-dynamic-routes" target="_blank" title="next.js 动态路由"> next.js 动态路由 </a> </li> <li> <a href="/w/nextjs/nextjs-pre-rendering" target="_blank" title="next.js 预渲染 pre rendering"> next.js 预渲染 pre rendering </a> </li> <li> <a href="/w/nextjs/nextjs-global-css-support" target="_blank" title="next.js 添加全局内置 css 样式"> next.js 添加全局内置 css 样式 </a> </li> <li> <a href="/w/nextjs/nextjs-css-support" target="_blank" title="next.js 内置对 css 的支持"> next.js 内置对 css 的支持 </a> </li> <li> <a href="/w/nextjs/nextjs-meta-data" target="_blank" title="next.js 元数据 - meta data"> next.js 元数据 - meta data </a> </li> <li> <a href="/w/nextjs/nextjs-static-serving" target="_blank" title="next.js 静态文件服务"> next.js 静态文件服务 </a> </li> <li> <a href="/w/nextjs/nextjs-routing" target="_blank" title="next.js 路由简介"> next.js 路由简介 </a> </li> <li> <a href="/w/nextjs/nextjs-pages" target="_blank" title="next.js 页面（pages）"> next.js 页面（pages） </a> </li> </ul> </section> <section class="module_white mt15 boxshadow"> <div class="module_hd"> <h2><span class="iconfont"></span>热门标签</h2> </div> <div class="rmbq of-h"> <a href="/tag/js/">js</a> <a href="/tag/javascript/">javascript</a> <a href="/tag/prototype/">prototype</a> <a href="/tag/vue/">vue</a> <a href="/tag/web/">web</a> <a href="/tag/python/">python</a> <a href="/tag/pandas/">pandas</a> <a href="/tag/mysql/">mysql</a> <a href="/tag/jquery/">jquery</a> <a href="/tag/angular/">angular</a> <a href="/tag/flask/">flask</a> <a href="/tag/django/">django</a> <a href="/tag/csharp/">csharp</a> <a href="/tag/c#/">c#</a> <a href="/tag/batch/">batch</a> <a href="/tag/linux/">linux</a> <a href="/tag/bash/">bash</a> <a href="/tag/c++/">c </a> <a href="/tag/arduino/">arduino</a> <a href="/tag/numpy/">numpy</a> <a href="/tag/powershell/">powershell</a> <a href="/tag/r/">r</a> <a href="/tag/rust/">rust</a> <a href="/tag/ruby/">ruby</a> </div> </section> </div> </div> <footer class="of-h" id="fixed_foot"> <div class="foot_wrap"> <div class="foot_right"> <ul class="ft_links"> <li><a href="/q">题库</a></li> <li>|</li> <li><a href="/tm/qwzt">随笔</a></li> <li>|</li> <li><a href="/tm/liuyan">留言</a></li> <li>|</li> <li><a href="/tm/zj">足迹</a></li> </ul> <div class="friend_hd"> ag捕鱼王app官网的友情链接 </div> <ul class="friend_con"> <ul class="fri-link"> <li><a href='https://www.btyyihex.com' target='_blank'>btyh</a> </li><li><a href='http://www.hao123.com/' target='_blank'>hao123</a> </li><li><a href='http://www.aliyue.net/' target='_blank'>小月博客</a> </li><li><a href='https://xuexb.com' target='_blank'>前端小武的博客</a> </li><li><a href='https://www.panziye.com/' target='_blank'>潘子夜个人博客</a> </li> </ul> </ul> </div> <div class="foot_left"> <p>design by jiyik.com <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow"> 冀icp备15007416号-2</a></p> <p>转载内容ag捕鱼王app官网的版权归作者及来源网站所有，本站原创内容未经许可禁止转载。如需转载请先联系：1244347461@qq.com</p> </div> </div> </footer> <div class="dimmer"></div> <div class="off-canvas"> <div class="canvas-close"> <i></i> </div> <div class="mobile-menu d-block d-xl-none d-lg-none"> </div> </div> <div class="right_fixed"> <a class="return_top iconfont" href="javascript:;" title="返回顶部" style="display:inline-block;"></a> <a class="ew iconfont" href="javascript:;" title="小程序"></a> </div> <div id="bottom-qrcode" class="min_pro" > <div class="text"> <div class="download-text c-font-big">扫码一下</div> <div class="c-font-normal c-color-gray2">查看教程更方便</div> </div> <img class="qrcode" src="/static/jiyi/v3/img/ew.jpg"> </div> <style> .right_fixed{position: fixed;right:1%;bottom: 25%;width:58px;border:1px solid #eee;font-size:24px;} .right_fixed a{width:56px;height:56px;display: inline-block;text-align:center;font-size:30px;line-height:56px;background-color:#fff;padding-right:0;color:#2a7e9f;} .right_fixed .return_top{border-bottom: 1px solid #eee;display: none;} .min_pro{bottom:25%;height: 115px;width:259px;padding: 10px;margin: 0;right: 86px;position: fixed;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);border-radius:12px;background-color: #fff;display:none;} .min_pro .text{text-align: left;margin-top: 24px;margin-left: 16px;font-size:14px;} /* .min_pro .text::after{content:""; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #154079; border-width: 6px; position: absolute; bottom: 12%; right: -12px; margin-left: -6px;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);} */ .min_pro img{position: absolute;width: 100px;height: 100px;top: 7px;right: 16px} </style> <script> $(window).scroll(function(){ var _top = $(document).scrolltop(); if(_top > 200){ $(".return_top").fadein(); }else{ $(".return_top").fadeout(); } }) $(".return_top").click(function(){ $('html,body').animate({scrolltop:0}, 100); return false; }) $(".ew").hover(function(){ $("#bottom-qrcode").show(); },function(){ $("#bottom-qrcode").hide(); }); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=g-hh7bmnwdqh"></script> <script> window.datalayer = window.datalayer || []; function gtag(){datalayer.push(arguments);} gtag('js', new date()); gtag('config', 'g-hh7bmnwdqh'); </script> <script type="text/javascript" src="/static/jiyi/v3/js/highlight.pack.js"></script> <script type="text/javascript" src="/static/jiyi/v3/js/global.js"></script> <script type="text/javascript"> $.get("/plus/count.php?view=yes&aid=3366&mid=1",function(data){$('.count').html(data)}); var href = window.location.href; href = href.substr(0,href.indexof('html')) "html"; $(".arcurl a").attr('href',href).html(href); $(function(){ if(!$("code.language-text").hasclass("hljs")) { $("code.language-text").addclass("hljs"); } hljs.inithighlighting(); }) </script> </body> </html>