在angularjs的文本框中写一些文本后如何触发单击按钮的回车键

时间:2018-12-29 17:49:15

标签: javascript html angularjs

我有一个文本框和一个按钮,单击按钮后我在文本框中写了一些文本后正在调用一个函数。我还需要在按Enter键的同时调用相同的函数。这是下面的代码。

html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text">
<button ng-click="myFunct()" type="button">click</button> 
</div>

脚本

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http) {   
$scope.myFunct = function() {
  alert('I am an alert');
    }
    });

2 个答案:

答案 0 :(得分:1)

在输入中添加ng-keyup

<input type="text" ng-keyup="$event.keyCode == 13 ? myFunct() : null">

答案 1 :(得分:0)

您需要添加一条指令,如下所示:

var app = angular.module("myApp", []);

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

                event.preventDefault();
            }
        });
    };
});

app.controller("myCtrl", function($scope) {   
  $scope.doSomething = function() {
    alert('I am an alert');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" my-enter="doSomething()">  
    <button ng-click="myFunct()" type="button">click</button> 
</div>