角度フォーム送信ボタンは2回目のクリックでのみ起動します

Question

APIにクエリを実行する小さなWebページを作成しています。入力されたすべてのデータが有効な場合、送信ボタンがヒットしたときにクエリが実行されます。しかし、ある時点で、別の要素（テキストボックス、選択ボックス、ボタン）のセットからフォームを調整していたときに、「検索」を1回押してから機能を呼び出すためにもう一度ヒットする必要がありました。

何が起こっているのですか/これをどのように修正しますか？

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を入れて...おっと。