Javascript AngularJS ng提交输入键不工作_Javascript_Angularjs

Javascript AngularJS ng提交输入键不工作

javascript angularjs

Javascript AngularJS ng提交输入键不工作,javascript,angularjs,Javascript,Angularjs,我正在与AngularJS合作，并且有一个表单，其中包含ng submit： <div ng-controller="LoginController as vm"> <form class="login-form" name="vm.form" ng-submit="vm.login()"> <h3 class="form-title">Sign In</h3> <div clas

我正在与AngularJS合作，并且有一个表单，其中包含

ng submit

：

  <div ng-controller="LoginController as vm">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
            <h3 class="form-title">Sign In</h3>

            <div class="form-group">
                <label class="control-label">E-mailaddress</label>
                <input class="form-control" type="text" 
                      name="email" ng-model="vm.email"/>
            </div>
            <div class="form-group">
                <label class="control-label">Password</label>
                <input class="form-control" type="password" name="password" ng-model="vm.password"/>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success uppercase">Login</button>
            </div>    
        </form>
   </div>

我已经试着验证你的代码，假设你的控制器如下所示，并且工作正常。试一试：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="LoginFactory">
    <form class="login-form" name="vm.form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>
<script type="text/javascript">
    'use strict';
    angular.module('app', []).controller('LoginFactory', function LoginController($scope){
        $scope.vm={};
        $scope.vm.login=login;
        function login(){
            console.log('login');
        }
    });
</script>
</body>
</html>


登录
电子邮件地址
密码
登录
"严格使用",；
角度.module（'app'，[]）.controller（'LoginFactory'，function LoginController（$scope）{
$scope.vm={}；
$scope.vm.login=login；
函数登录（）{
log（'login'）；
}
});

或者，您也可以通过构建ng enter指令并使用它来解决此问题。下面是执行此操作的代码段

angular.module('myApp').directive('ngEnter', function () {
return function (scope, element, attrs) {
    element.bind('keydown keypress', function (event) {
        if(event.which === 13) {
            scope.$apply(function (){
                scope.$eval(attrs.ngEnter);
            });
            event.preventDefault();
        }
    });
};

}))

这样不行，我们可以检查一下：

如果表单有2+个输入字段，并且没有按钮或输入[type=submit]，则按enter键不会触发submit

作为一种解决方法，我建议使用两个表单标记，每个字段一个，在ng submit中使用相同的函数，类似于：

<div ng-controller="LoginFactory">
    <form class="login-form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
    </form>
    <form class="login-form" ng-submit="vm.login()">
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>


登录
电子邮件地址
密码
登录

你的控制器代码？你使用的是哪个版本的angular？@ShailendraSharma我编辑了我的主要帖子并添加了控制器。在我看来这无关紧要；）@我用的是“angular”：“1.4.x”在这里很好用，我编辑了我的帖子并添加了控制器。唯一的区别是，

vm

未连接到

$scope

。但是，html代码通过

LoginController作为vm

获取控制器。我想没关系……Idd，我认为删除controllerAs语法也不会有什么不同。

<div ng-controller="LoginFactory">
    <form class="login-form" ng-submit="vm.login()">
        <h3 class="form-title">Sign In</h3>

        <div class="form-group">
            <label class="control-label">E-mailaddress</label>
            <input class="form-control" type="text"
                    name="email" ng-model="vm.email"/>
        </div>
    </form>
    <form class="login-form" ng-submit="vm.login()">
        <div class="form-group">
            <label class="control-label">Password</label>
            <input class="form-control" type="password" name="password" ng-model="vm.password"/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase">Login</button>
        </div>
    </form>
</div>