单击AngularJS中的Fire按钮

时间:2013-04-18 10:27:01

标签: events button input angularjs click

我想在输入中按Enter键时触发按钮的单击事件,我发现使用AngularJS非常困难。

我的观点(简体,已更新):

<!doctype html>
<html lang="en" ng:app="test">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="css/app.css" />
    </head>
    <body ng-controller="TestController">
        <button ng-click="onButton1Click()" class="btn1">Click Me</button>
        <button ng-click="onButton2Click()" class="btn2">Don't click me</button>
        <script src="lib/jquery/jquery.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="js/testcontroller.js"></script>
    </body>
</html>

此视图的控制器:

'use strict';

angular.module('test', [])
.controller('TestController', ['$scope',
    function($scope) {

        $scope.onButton1Click = function() {
            alert("Hello");
        }

        $scope.onButton2Click = function() {
            $('.btn2').click();
        }
}])

我简化了所有代码。当我点击 btn2 时出现此错误

  

$申请已在进行中

不,我无法直接致电$scope.onButton1Click(),我必须模拟 btn1 点击。

3 个答案:

答案 0 :(得分:13)

你提到了

  

在输入

中输入ENTER时触发按钮的单击事件

因此,如果可以安全地假设您可以使用我希望使用ng-submit的表单,如下所示。

<form ng-submit="clickEventFunction()">
  <input type="text"/>
  <button type="submit">Click</button>
</form>

注意按钮类型应为提交

答案 1 :(得分:3)

我花了一段时间才弄明白(很多小提琴)。

<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>

创建一个表单并使用ng-submit来触发事件(可能是一个函数)。

然后创建两个输入(一个是“text”,另一个是“submit”)。

然后按Enter键应该触发ng-submit事件/函数。

答案 2 :(得分:1)

我想,你只需要调用你的$ scope.onButtonClick()

请检查this Plunker

$scope.onKeyPress = function($event) {
   if ($event.keyCode == 13) {
      $scope.onButtonClick();
   }
};