Как проверить, пусты ли параметры запроса с помощью форм AngularJS

У меня есть проект, в котором я использую параметры запроса, которые передаются на сервер для поиска.

Они передаются с помощью метода $http.get в AngularJS.

Некоторые параметры не требуются для поиска, поэтому я хочу, чтобы их не было в 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>


angularjs jersey angularjs-forms
person George Sp    schedule 20.09.2017    source источник
comment
Не могу понять ваш вопрос. Не могли бы вы уточнить это ??   -  person Kaustubh Khare    schedule 20.09.2017
comment
Я перефразировал его, проверьте вопрос еще раз, пожалуйста, и спросите меня о любой дополнительной информации.   -  person George Sp    schedule 20.09.2017
comment
Как сейчас выглядит ваш код?   -  person Kyle Krzeski    schedule 20.09.2017
comment
используйте lodash в своем проекте и поместите код как _.compact(searchListingObj), это удалит поле нулевого значения в вашем объекте. Или же вам нужно использовать angular.forEach и проверять его индивидуально.   -  person Alaksandar Jesus Gene    schedule 20.09.2017

Ответы (1)


arrow_upward
1
arrow_downward

Используйте атрибут 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 — формы.

Также обратите внимание, как были изменены атрибуты 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.

person georgeawg    schedule 20.09.2017
comment
Вы не поняли моего вопроса здесь. Не все поля ввода обязательны, и я хочу проверить, пусты ли они. Если одно поле пустое, я не хочу, чтобы оно было параметром поиска. Думайте о них как о фильтрах, я хочу проверить, какие из них включены - person George Sp; 21.09.2017
comment
@GeorgeSp, StackOverflow не является службой написания кода. Вам нужно показать код того, что вы пытались достичь, чего хотите. Если вы хотите создать объект params, который пропускает свойства для пустых полей, это тривиальная проблема. - person georgeawg; 21.09.2017