淺談angularjs中響應(yīng)回車事件

更新時間：2017年04月24日 09:12:19 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談angularjs中響應(yīng)回車事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

下面這個示例在輸入框鍵入回車鍵或者點(diǎn)擊按鈕時，將輸入框的值置為"Hello World!"：（黃色背景內(nèi)容為響應(yīng)回車事件涉及到的代碼）

<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中響應(yīng)回車事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談AngularJS中ng-class的使用方法
下面小編就為大家?guī)硪黄獪\談AngularJS中ng-class的使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
AngularJS 中ui-view傳參的實(shí)例詳解
這篇文章主要介紹了AngularJS 中ui-view傳參的實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下
2017-08-08
AngularJs分頁插件使用詳解
這篇文章主要為大家詳細(xì)介紹了AngularJs分頁插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-06-06
angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Angular6封裝http請求的步驟詳解
最近抽空學(xué)習(xí)了一下Angular6，之前主要使用的是vue，所以免不了的也想對Angular6提供的工具進(jìn)行一些封裝，今天主要就跟大家講一下這個http模塊
2018-08-08
AngularJS解決ng-if中的ng-model值無效的問題
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無效的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
淺談Angular單元測試總結(jié)
這篇文章主要介紹了淺談Angular單元測試總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
AngularJS教程 ng-style 指令簡單示例
本文主要介紹AngularJS ng-style 指令,這里對ng-style 指令做了詳細(xì)的基礎(chǔ)資料整理，并附有代碼示例，有需要的朋友可以參考下
2016-08-08
Angular8升級至Angular13遇到的問題解決
這幾天升級公司的一個Angular項(xiàng)目遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級至Angular13遇到的問題解決,文中介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01