Angular Form提交按鈕僅在第二次單擊時觸發

Question

我正在建立一個小的網頁，對API進行一些查詢。 如果所有輸入的數據均有效，則在單擊“提交”按鈕時進行查詢。 但是在某些時候，當我從一組單獨的元素（文本框，選擇框，按鈕）調整表單時，我開始不得不點擊“搜索”一次，然后再次點擊它以觸發該函數。

怎么回事/如何解決？

HTML：

<div id="search" class="centerWrapper">
    <div id="searchArea" class="searchArea">
        <input type="text" class="inputBox" name="charName" ng-model="charName" placeholder="Character Name"></input>
        <select class="selectBox" ng-model="selectedRealm" name="selectedRealm" ng-options="realm.name for realm in realmList">
            <option value="" class="realmPlaceholder" disabled selected>Select Realm Name</option>
        </select>
        <button type="button" ng-click="buttonpress(charName, selectedRealm)" class="searchButton">Search</button>
    </div>
</div>

控制器代碼：

$scope.buttonpress = function(charName, realmName){
    if(typeof charName === "undefined" || charName.includes("world") || typeof realmName === "undefined"){
        alert("Please enter a valid Character Name and Realm.")
    } else {
        var request = {name: charName, realm: realmName};
        $http.post('/buttonpress', request)
        .then(function(response) {
            alert(response.data);
        });
    }
}

CSS：

input.searchButton {
    text-align: center;
    width: 79%;
    background-color: #128880;
    color:#ACC8C9;
    border: none;
    margin-top: 5px;
    height: 22%;
}

input.searchButton:hover {
    background-color: rgb(1, 92, 196)
}

input.searchButton:active {
    background-color: #134b58;
    box-shadow: 0 5px rgb(102, 102, 102);
    transform: translateY(4px);
}

注意：我注意到這也僅在啟動頁面和刷新后出現。

Answer 1

哎呀 這就是為什么在凌晨4:30之前進行編碼是個壞主意的原因。 一些愚蠢的錯誤將會發生：

$scope.buttonpress = function() {
    $scope.buttonpress = function(){
        if(typeof $scope.charName === "undefined" || $scope.charName.includes(";") || typeof $scope.selectedRealm === "undefined"){
            alert("Please enter a valid Character Name and Realm.")
        } else {
            var request = {name: $scope.charName, realm: $scope.selectedRealm};
            $http.post('/buttonpress', request)
            .then(function(response) {
                // alert(response.data);
                debugger;
                $scope.showBoard = true;
            });
        }
    }
};

答案之謎：不知何故，我將buttonPress放在另一個buttonPress內。