how to make API calls in angularjs - angularjs

Question

I am new to this platform, I have a select option box and a another select box then the number input field. if the user select fieldName by selection and operator by selection and enter the number then the submit button to get the data from the server.
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">
Example: if the user selectfield = footfall and select the operator = greaterthan and input value of 50. after submit the data should bring from the server.
Thanks in Advance!!!

Answer 1

I will start with assumption on what do you want to do, since it's not so clear from your post.
You basically have an endpoint at http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus and you want to pass it parameters like minVal, selfield and optrfield?
If this is the question, then there are several possibilities.
The easiest thing you can do is to just values to your URL string.
$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=" + $scope.minVal + "&optrfield=" + $scope.optrfield + "&selfield="+ $scope.selfield)
or more cleanly:
$http.get(`http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=${$scope.minVal}&optrfield=${$scope.optrfield}&selfield=${$scope.selfield}`)
Please note that minVal, optrfield and selfield that are inside the string (not your controller variables) need to match your method parameters in your server code.
Also, you can always do it like this:
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
For more information, please check out this link.