【问题标题】:Submit form while key press in Angular JS在Angular JS中按键时提交表单
【发布时间】:2014-12-16 06:18:31
【问题描述】:

我有一个如下的登录表单。单击登录按钮时会调用登录控制器并且它工作正常。输入用户名和密码后,我需要在“Enter”键上调用相同的函数。

  <form class="form-horizontal">
   <fieldset>
   <div class="form-group">
     <input type="text"
        class="form-control input-lg input-round text-center"
        placeholder="Username"
        ng-model="uservals">
   </div>
  <div class="form-group">
     <input type="password"
        class="form-control input-lg input-round text-center"
        placeholder="Password"
        ng-model="passvals">
  </div>
  <div class="form-group">
     <a href="#/" class="btn btn-primary btn-lg btn-round btn-block text-center" ng-click="log_me()">Log in</a>
  </div>
  </fieldset>
  </form>

控制器

var mysession = '';
function loginController($scope, $http, $cookieStore, $location) {
$scope.sess_id = mysession;
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
$scope.log_me = function() {
    $scope.login_me = [];
    var login_un = $scope.uservals;
    var login_pwd = $scope.passvals;
    var logs_me = "http://www.vb.com/login.html?username=" + login_un + "&password=" + login_pwd;
    $http.get(logs_me)
        .success(function(response) {
            $cookieStore.put('token', response.token);
            $cookieStore.put('ex_Id', response.ExId);
            $cookieStore.put('Cont_Id', response.contactId);
            $cookieStore.put('email', response.email);
            $cookieStore.put('name', response.name);
            mysession = response.ss_id;
            if (response.status == "failure") {
                $('.login_error').show();
                $('.login_error').html('Invalid username or password');
                $('.login_error').delay(4000).fadeOut();
                $('.loading').hide();
            } else {
                $('.page-signin').hide();
                $('.signin-header').hide();
                $location.path('/dashboard');
                }
              });
      }
  }

【问题讨论】:

标签: javascript jquery angularjs


【解决方案1】:

Demo

像这样改变你的表格;

<form class="form-horizontal" ng-submit="log_me()">

然后更新您的按钮以提交按钮,如下所示;

<input type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center" value="Log in"/>

当您单击 Enter 键时,这将自动提交您的表单。

【讨论】:

  • 感谢您的解决方案。但是,如果我从提交按钮中删除 ng-click="login_me()" 按钮按下它会起作用吗?我希望它双向工作。
  • 是的,它会起作用的。因为,它是提交按钮,它触发了表单的提交事件。并且 ng-submit 处理
猜你喜欢
  • 1970-01-01
  • 2015-07-22
  • 1970-01-01
  • 2020-05-09
  • 1970-01-01
  • 2016-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多