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

来自docs

您可以使用以下两种方法之一来指定javascript   提交表单时应该调用方法：
     第一个表单元素ngClick指令的
ngSubmit指令   提交类型的按钮或输入字段（输入[type = submit]）为了防止   处理程序的双重执行，只使用其中一个ngSubmit或   ngClick指令。这是因为以下表单提交   HTML规范中的规则：

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

所以诀窍就是只有一个类型的按钮＆＃34;提交＆＃34;在任何给定时间以您的形式，并根据您的模型状态选择该按钮。使用多个按钮，输入将触发第一个按钮上的ng-单击，类型为=＆＃34;提交＆＃34; （它会调用ng-submit，虽然这里不需要）

不幸的是，您无法修改＆＃34;类型＆＃34;这样的绑定按钮：

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

此外，ng-show不会从DOM中删除该按钮，因此您当前的解决方案会为您留下多个类型=＆＃34;提交＆＃34;的按钮，在这种情况下只有第一个（隐藏）是否会执行它的点击功能。

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

如果您希望两个按钮都可见，那么我可以提出的唯一解决方案是不要创建自定义按钮指令，即复制按钮块，以便根据您的条件使用不同的块（{ {3}}）。

<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: All buttons inside form triggers submit?

Answer 3

请尝试ng-if而不是ng-show

<强> CODE

<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('s.e.q')");
        } 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>

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

4 个答案: