如何检查查询参数是否为空的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形式

回答

相关问题