2017-10-02 10 views
0

私はこのプラットフォームを初めて使用しています。私は選択オプションボックスと、数字入力フィールドの後に別の選択ボックスを持っています。ユーザーが選択してフィールド名を選択し、選択して演算子を入力し、サーバーからデータを取得するために送信ボタンを押します。angularjsでAPI呼び出しを行う方法

var app = angular.module("app", []); 
app.controller('OutletController', function($scope, $http) { 
    $scope.minVal = ""; 
    $scope.GetFullDetails = function(outlets) { 
    $scope.outlets = []; 
    $scope.err = []; 
    $http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?" + $scope.minVal). 
    success(function(data) { 
     $scope.outlets = data; 
    }). 
    error(function(data) { 
     $scope.err = data; 
    }); 
    } 
}); 

$scope.selectField = [{ 
    displayname: "Field Name", 
    valueType: "", 
    fieldname: "" 
}, { 
    displayname: "Keyword", 
    valueType: "text", 
    fieldname: "keyword" 
}, { 
    displayname: "Offer Status", 
    valueType: "text", 
    fieldname: "offerStatus" 
}, { 
    displayname: "Start Date", 
    valueType: "date", 
    fieldname: "startDate" 
}, { 
    displayname: "End Date", 
    valueType: "date", 
    fieldname: "endDate" 
}, { 
    displayname: "Total Run Span", 
    valueType: "number", 
    fieldname: "totalRunSpan" 
}, { 
    displayname: "Foot Fall", 
    valueType: "number", 
    fieldname: "footfall" 
}]; 
$scope.selfield = $scope.selectField["0"]; 

//<------------------------------ Operator section ------------------------------------->// 
$scope.Operators = [{ 
    displayname: "Operator", 
    fieldname: "" 
}, { 
    displayname: "Greater Than", 
    fieldname: "greaterThan" 
}, { 
    displayname: "Between", 
    fieldname: "between" 
}]; 
$scope.optrfield = $scope.Operators["0"]; 
<select name="Select Field" ng-model="selfield" 
     ng-options="fld as fld.displayname for fld in selectField" 
     ng-change="selectfld()"> 
</select> 
<select name="Operators" ng-model="optrfield" 
     ng-options="opr as opr.displayname for opr in Operators" 
     ng-change="selectOptr()" ng-show="operat"> 
</select> 
<input type="number" name="min number" ng-model="minVal" 
     placeholder="Enter Value" ng-show="minN"> 

例:サーバから持って来るべきユーザselectfield =着地場合と50のオペレータ=演算子:GreaterThanと入力値を選択した後にデータを提出。

ありがとうございました!!!

+0

何が質問ですか? –

+0

angle.jsを使用するパラメータを使用したHTTP GETリクエスト。私はどのように私の関数内でデータを取得するためのパラメータ(オプション1の値を選択し、オプション2の値と入力値を選択する)を使用することができますか? –

+0

$ http '.success'と' .error'メソッドは廃止予定です。代わりに '.then'と' .catch'メソッドを使用してください。 – georgeawg

答えて

0

私はあなたの投稿からはっきりしていないので、何をしたいと思うかという前提で始めます。

あなたは基本的にhttp://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatusでエンドポイントを持っていて、それがminValselfieldoptrfieldのようなパラメータ渡ししたいですか?

これが疑問であれば、いくつかの可能性があります。

あなたができる最も簡単なことは、URL文字列に値を付けることだけです。

$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=" + $scope.minVal + "&optrfield=" + $scope.optrfield + "&selfield="+ $scope.selfield) 

以上のきれい:

$http.get(`http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=${$scope.minVal}&optrfield=${$scope.optrfield}&selfield=${$scope.selfield}`) 

文字列(ないあなたのコントローラ変数)内にあるMINVAL、optrfieldとselfield、サーバーコードで、あなたのメソッドのパラメータと一致する必要がありますのでご注意ください。

また、あなたは常にこのようにそれを行うことができます。詳細については

var request = { 
    url: 'http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus', 
    method: 'GET', 
    data: { 
    minVal: $scope.minVal, 
    optrfield: $scope.optrfield, 
    selfield: $scope.selfield 
    } 
} 

$http(request) 
//rest of your code 

、このlinkをご覧ください。

関連する問題