Question

我有一个项目，我使用查询参数传递给后端进行搜索。

使用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>

Answer 1

在输入上使用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方法。

如何使用AngularJS表单检查查询参数是否为空

1 个答案: