Question

我用角度构造了一个简单的形式。我希望一旦用户输入一些值，然后按回车键 - 将运行ng-click功能（在这种情况下updateMsg（{name：name，room：room}））。

然而，这段代码不起作用..函数只有在按下按钮后运行（不是我想要的 - 输入键盘值，然后输入..）

代码低于......

请帮忙吗？

由于

<body>
    <div class="Member">
        <h1>Sign In</h1>
        <form name="myForm" ng-submit="updateMsg({name: name,room: room})">
            Please enter your details:
            <br>
            Name: <input name="name" ng-model="name" autocomplete="off">
            <br>
            Room: <input name="room" ng-model="room" autocomplete="off">
            <br>
            <button type="button" ng-click="updateMsg({name: name,room: room})">

            Enter
            </button>
        </form>
    </div>
</body>

Answer 1

我认为按钮应该有type=submit。

<button type="submit">

而不是

<button type="button" ng-click="updateMsg({name: name,room: room})">Enter</button>

Answer 2

您不应同时使用ng-click和ng-submit指令。像这样在您的按钮中添加type="submit"：

<button type="submit">Enter</button>

并仅保留ng-submit：

    <form name="myForm" ng-submit="updateMsg({name: name,room: room})">
        Please enter your details:
        <br> Name:
        <input name="name" ng-model="name" autocomplete="off">
        <br> Room:
        <input name="room" ng-model="room" autocomplete="off">
        <br>
        <button type="submit">Enter</button>
    </form>

同样没有必要让ng-submit="updateMsg({name: name,room: room})"传递更新的数据。由于您使用的是ng-model，因此您已准备就绪。您最初可以在控制器中声明范围变量，并在表单提交后立即使用它们。由于双重绑定，您的vars将已更新：

angular
.module('myApp', [])
.controller('MemberController', ['$scope', function($scope) {
    $scope.name = '';
    $scope.room = '';
    $scope.updateMsg = function() {
        // use updated $scope.name in here
        // use updated $scope.room too
    }
}]);

一个小plunker来帮助你。

Answer 3

您是否正在调用event.preventDefault()方法，因此表单默认情况下不提交？也许在您创建updateMsg({name: name,room: room})。

的地方分享代码

当在其中一个文本字段上按Enter键时，angular的ng-submit（）指令不会提交

3 个答案: