快捷導(dǎo)航

AngularJS基礎(chǔ) ng-keypress 指令簡(jiǎn)單示例

更新時(shí)間：2016年08月02日 09:32:23 投稿：lqh

本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎(chǔ)資料,并附是示例代碼,有需要的小伙伴可以參考下

AngularJS ng-keypress 指令

AngularJS 實(shí)例

按下按鍵時(shí)執(zhí)行的代碼:

<!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-keypress="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

<p>該實(shí)例在輸入框每次按下按鍵時(shí)，計(jì)算變量 "count" 會(huì)自動(dòng)加 1。</p>

</body>
</html>

定義和用法

ng-keypress 指令用于告訴 AngularJS 在指定 HTML 元素上按下按鍵時(shí)需要的操作。

ng-keypress指令不會(huì)覆蓋元素的原生 onkeypress 事件, 事件觸發(fā)時(shí)，ng-keypress 表達(dá)式與原生的 onkeypress 事件將都會(huì)執(zhí)行。

按鍵敲擊的事件順序:

1.Keydown

2.Keypress

3.Keyup

語(yǔ)法

<input>, <select>, <textarea>, 和其他可編輯元素支持該指令。

參數(shù)值

值	描述
expression	按下按鍵執(zhí)行的表達(dá)式。

您可能感興趣的文章:

相關(guān)文章

簡(jiǎn)介AngularJS中使用factory和service的方法
這篇文章主要簡(jiǎn)單介紹了AngularJS中使用factory和service的方法,主要針對(duì)自定義工廠和服務(wù)的創(chuàng)建來(lái)講,需要的朋友可以參考下
2015-06-06
Angular.JS內(nèi)置服務(wù)$http對(duì)數(shù)據(jù)庫(kù)的增刪改使用教程
我們可以使用內(nèi)置的$http服務(wù)直接同外部進(jìn)行通信。$http服務(wù)只是簡(jiǎn)單的封裝了瀏覽器原生的XMLHttpRequest對(duì)象，下面這篇文章主要給大家介紹了關(guān)于Angular.JS內(nèi)置服務(wù)$http對(duì)數(shù)據(jù)庫(kù)的增刪改等操作的相關(guān)資料，需要的朋友可以參考下。
2017-05-05
三種AngularJS中獲取數(shù)據(jù)源的方式
這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下
2016-02-02
angularjs 中$apply，$digest，$watch詳解
這篇文章主要介紹了angularjs 中$apply，$digest，$watch詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
Angular的MVC和作用域
本文主要Angular的MVC和作用域進(jìn)行詳細(xì)分析介紹，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2016-12-12
深入探究AngularJS框架中Scope對(duì)象的超級(jí)教程
這篇文章主要介紹了AngularJS框架中Scope對(duì)象使用的相關(guān)學(xué)習(xí)教程,包括其和rootscope的區(qū)別介紹,需要的朋友可以參考下
2016-01-01
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí)，在學(xué)習(xí)過(guò)程中寫(xiě)了一個(gè)小demo，下面把代碼思路分享給大家，感興趣的朋友一起學(xué)習(xí)
2016-04-04
AngularJS報(bào)錯(cuò)$apply already in progress的解決方法分析
這篇文章主要介紹了AngularJS報(bào)錯(cuò)$apply already in progress的解決方法,較為詳細(xì)的分析了報(bào)錯(cuò)$apply already in progress的原理、處理技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-01-01
Angular CLI 安裝和使用教程
本篇文章主要介紹了Angular CLI 安裝和使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Angular中使用better-scroll插件的方法
本篇文章主要介紹了Angular中使用better-scroll插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03