如何在angularjs中进行API调用

时间:2017-10-02 07:38:12

标签: angularjs

我是这个平台的新手,我有一个选择框和另一个选择框,然后是数字输入字段。如果用户通过选择选择fieldName并按操作选择并输入数字,则输入提交按钮以从服务器获取数据。

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 = footfall并选择operator = greaterthan并输入值为50.提交数据后应从服务器带来。

提前致谢!!!

1 个答案:

答案 0 :(得分: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