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属性を使用します。AngularJS Developer Guide - Formsを参照してください

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

を。

また、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バージョン1.6から削除されていることに注意してください。代わりに.thenと.catchメソッドを使用します。

出典

2017-09-20 18:36:25 georgeawg

ここで私の質問を理解できませんでした。すべての入力フィールドが必須ではなく、空であるかどうかを確認することが必要です。 1つのフィールドが空の場合、検索パラメータとして使用したくないです。それらをフィルタと考えると、有効になっているものを確認したいです。 –

@GeorgeSp、StackOverflowはコード作成サービスではありません。あなたは、あなたが望むものを達成しようとしたもののコードを表示する必要があります。空のフィールドのプロパティを省略したparamsオブジェクトを作成したい場合、それは簡単な問題です。 – georgeawg

AngularJSフォームで照会パラメーターが空であるかどうかを確認する方法

答えて

関連する問題