如何檢查查詢參數是否爲空的AngularJS形式

我有一個項目，我使用查詢參數傳遞到後端搜索。如何檢查查詢參數是否爲空的AngularJS形式

它們使用AngularJS中的$ http.get方法傳遞。

一些參數不是搜索所必需的，所以我希望它們在空的時候不在url中。

如何獲得此功能？

下面是我的代碼：

<!DOCTYPE html> 
    <html lang="en" ng-app = "searchApp"> 

    <script type="text/javascript"> 
    var searchApp = angular.module("searchApp", []); 

    searchApp.controller("searchListingsCtrl", ['$scope', '$http', function($scope, $http) { 
    $scope.searchListings = function(){   

    if ($scope.checkIn == '') {} 
    var searchListingObj = { 
      checkIn : $scope.checkIn, 
      checkOut : $scope.checkOut, 
      country : $scope.country, 
      city : $scope.city, 
      state : $scope.state, 
      accommodates : $scope.accommodates, 

    } 

    var res = $http.get('http://www.localhost:8080/messenger/webapi/listings', searchListingObj); 
    res.success(function(data, status, headers, config) { 
     $scope.message = data; 
    }); 
    res.error(function(data, status, headers, config) { 
     alert("failure message: " + JSON.stringify({data: data})); 
    });  
    }; 
}]); 
</script> 

<body ng-controller="searchListingsCtrl"> 

    <form action="/listings" name="listings" ng-submit="searchListings()"> 
     <input type="text" name="neighborhood" placeholder="Neighborhood:" ng-model="state">  
     <input type="text" name="town" placeholder="Town:" ng-model="city"> 
     <input type="text" name="country" placeholder="Country:" ng-model="country">    
     People:<select class="peopleSelect" placeholder="People:" ng-model="accommodates"> </select> 
     <input type="text" id="arrival" name="arrival" value="Arrival" ng-model="checkIn"> 
     <input type="text" id="departure" name="depart" value="Departure" ng-model="checkOut"> 
     <input type="submit" name="submit" value="Search" id="Search_submit"> 
    </form> 
    </body>

來源

2017-09-20 George Sp

無法理解您的問題。你能否詳細說明一下？ –

我重新編寫了它，請再次檢查問題，然後詢問我的更多信息。 –

你的代碼現在是什麼樣子？ –

使用上投入的required屬性，以防止表單提交空字段：

<form ̶a̶c̶t̶i̶o̶n̶=̶"̶/̶l̶i̶s̶t̶i̶n̶g̶s̶"̶ name="listings" ng-submit="searchListings()"> 
    <input type="text" name="neighborhood" placeholder="Neighborhood:" 
      ng-model="fdata.state" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />  
    <input type="text" name="town" placeholder="Town:" 
      ng-model="fdata.city" ͟r͟e͟q͟u͟i͟r͟e͟d͟ /> 
    <input type="text" name="country" placeholder="Country:" 
      ng-model="fdata.country" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />    
    People:<select class="peopleSelect" placeholder="People:" 
        ng-model="fdata.accommodates" ͟r͟e͟q͟u͟i͟r͟e͟d͟ /> 
      </select> 
    <input type="text" id="arrival" name="arrival" value="Arrival" 
      ng-model="fdata.checkIn" ͟r͟e͟q͟u͟i͟r͟e͟d͟ /> 
    <input type="text" id="departure" name="depart" value="Departure" 
      ng-model="fdata.checkOut" ͟r͟e͟q͟u͟i͟r͟e͟d͟ /> 
    <input type="submit" name="submit" value="Search" id="Search_submit" /> 
</form>

欲瞭解更多信息，請參閱AngularJS Developer Guide - Forms。

另請注意，ng-model屬性如何更改爲將數據放在JavaScript對象上。這使得它更容易提出：

$scope.fdata = {}; 
var url = "http://www.localhost:8080/messenger/webapi/listings"; 

$scope.searchListings = function() { 
    var config = { params: fdata }; 

    $http.get(url, config) 
     .then(function(response) { 
     $scope.message = response.data; 
    }) 
     .catch(function(response) { 
     var data = response.data; 
     console.log("failure message: " + JSON.stringify({data: data})); 
     throw response; 
    });    

};

另外要注意的是，$ HTTP .success和.catch方法已過時，並且從AngularJS V1.6刪除。而應使用.then和.catch方法。

來源

2017-09-20 18:36:25 georgeawg

您在這裏不理解我的問題。並非所有輸入輸入字段都是必需的，我想要檢查它們是否爲空。如果一個字段爲空，我不希望它作爲搜索參數。把它們想象成過濾器，我想檢查其中哪些被啓用 –

@GeorgeSp，StackOverflow不是代碼寫入服務。你需要顯示你試圖達到你想要的東西的代碼。如果你想創建一個params對象，它省略了空字段的屬性，這是一個微不足道的問題。 – georgeawg

如何檢查查詢參數是否爲空的AngularJS形式

回答

相關問題