当我有多个可能的提交按钮时，如何在ENTER上执行表单提交？

Question

我有一个不寻常的问题。 我的表单像这样松散：

     <form>
        <button ng-class="{'btn-primary': ts.test.current == true}"
                ng-click="$state.transitionTo('s.e.q');"
                ng-show="ts.test.current && ts.test.userTestId">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
                ng-click="getTest(ts.test)"
                ng-show="ts.test.current && !ts.test.userTestId">
            Acquire
        </button>
     </form>

我需要的是输入键触发当前按钮主要操作。 请注意，主按钮可以是两个按钮中的一个，具体取决于页面上其他项目的状态。

任何人都可以建议如何做到这一点？ 我看到了对ng-enter指令的引用，但如果可能的话，我认为不使用非标准指令会更好。

这是我到目前为止所尝试的。 不幸的是，当我点击输入时没有任

            <form ng-show="ts.test.current && ts.test.userTestId"
                  ng-submit="$state.transitionTo('s.e.q');">
                <button ng-class="{'btn-primary': ts.test.current == true}"
                        type="submit">
                    View
                </button>
            </form>
            <form ng-show="ts.test.current && !ts.test.userTestId"
                  ng-submit="getTest(ts.test)">
                <button class="btn"
                        ng-class="{'btn-primary': ts.test.current == true}"
                        type="submit">
                    Acquire
                </button>
            </form>

Answer 1

来自文档

您可以使用以下两种方法之一来指定在提交表单时应调用的javascript方法：

表单元素ngClick指令的ngSubmit指令在第一个按钮或输入字段类型为submit（input [type = submit]）为了防止处理程序的双重执行，只使用ngSubmit或ngClick指令之一。 这是因为HTML规范中的以下表单提交规则：

如果表单只有一个输入字段，那么点击输入此字段会触发表单提交（ngSubmit）如果表单有2个以上的输入字段且没有按钮或输入[type = submit]，那么点击输入不会触发提交，如果表单有一个或多个输入字段和一个或多个按钮或输入[type = submit]然后点击输入任何输入字段将触发第一个按钮上的点击处理程序或输入[type = submit]（ngClick）和提交处理程序封闭形式（ngSubmit）

因此，在任何给定时间，只需在表单中使用“提交”类型的一个按钮，并根据模型的状态选择该按钮。 使用多个按钮，输入将触发第一个按钮上的ng-单击，类型=“提交”（它将调用ng-submit，尽管这里不需要）

不幸的是，你不能用这样的绑定修改按钮的“类型”：

<button type="{{isPrimary ? 'submit' : 'button'}}">Acquire</button>

此外，ng-show不会从DOM中删除该按钮，因此您当前的解决方案会为您留下多个type =“submit”的按钮，在这种情况下，只有第一个（隐藏或不隐藏）按钮将执行它的click功能。

如果您只想在任何给定时间看到一个按钮，那么将ng-show更改为ng-if就可以了（ 请参阅此Plunk ）。

如果你想让两个按钮都可见，那么我能想出的唯一解决方案是不要创建一个自定义按钮指令就是复制你的按钮块，这样你就可以根据自己的情况使用不同的块了（ 参见本插件 ）。

<form>
    <div ng-if="ts.test.userTestId">
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="$state.transitionTo('s.e.q');"
            type="submit">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="getTest(ts.test)"
            type="button">
            Acquire
        </button>
    </div>
    <div ng-if="!ts.test.userTestId">
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="$state.transitionTo('s.e.q');"
            type="button">
            View
        </button>
        <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="getTest(ts.test)"
            type="submit">
            Acquire
        </button>
    </div>

 </form>

Answer 2

将不应提交表单的按钮更改为<button type="button">

button  "clickable, but without any event handler until one is assigned"

另请参阅： AngularJS：表单触发器中的所有按钮都提交？

Answer 3

尝试ng-if而不是ng-show

码

<form>
    <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="$state.transitionTo('s.e.q');"
            ng-if="ts.test.current && ts.test.userTestId">
        View
    </button>
    <button ng-class="{'btn-primary': ts.test.current == true}"
            ng-click="getTest(ts.test)"
            ng-if="ts.test.current && !ts.test.userTestId">
        Acquire
    </button>
 </form>

Answer 4

您需要在表单上提供一个提交方法，然后只需将按钮标记为type =“submit”，如果您希望它们提交表单。

请参阅ngSumbit上的Angular文档。

阅读您的代码看起来好像您只想在任何给定时间看到一个按钮。 基于此，我认为您真正想要的是根据ts.test.userTestId的条件修改按钮上的标签。

这里有一个jsfiddle演示1）表单提交处理，2）您的查看/获取按钮上的标签更改，以及3）如果您真的需要它可以有一个额外的按钮这一事实。

 function ButtonController($scope) { $scope.ts = { test: { userTestId: '' } } $scope.getTest = function (value) { alert('getTest called'); } $scope.submit = function () { if ($scope.ts.test.userTestId) { alert("call $state.tranistionTo('seq')"); } else { $scope.getTest($scope.ts.test); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <h2>The button</h2> <div ng-controller="ButtonController"> <form ng-submit="submit()"> <input type="text" ng-model="ts.test.userTestId"> <button type="submit">{{ ts.test.userTestId ? 'View' : 'Acquire' }}</button> <br><br> Here's an extra button which also submits the form. Notice that the submit routine still only runs once and having this extra button doesn't cause any problems. <br> <button type="submit">Some other submit button</button> </form> </div> </div>