當我有多個可能的提交按鈕時，如何在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>