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放在另一个按钮内。按..哎呀。

Angular Form提交按钮仅在第二次单击时触发

1 个答案: