Question

我正在尝试执行GET请求并根据Angular JS中选择的值更改端点URL参数（版本： - Angular 1）。我有一些API端点，它接受GET请求并返回JSON。 JSON结构相同，并且值仅针对不同的选定选项而不同。我们可以更改URL结束参数以调用该特定API。例如，

端点为api.endpoint.com/{{options}}/

JSON结构

[
  {
    id : "1",
    value : "value1"
  }
]

每当我们选择一个选项时，它都会用所选值替换{{option}}。假设，如果我们选择option 2，它会立即点击api.endpoint.com/option2/并在下面的<p>标记中显示输出。 <p>标签应根据选项自动更新，而无需重新加载整个页面。

这是我正在尝试的Angular控制器代码。当select选项更改时，建议调用API的方法是什么？

Angular：

app.controller('optionController', ['$scope','$http', '$window', 'Selectoption', function($scope, $http, $window, Selectoption) {
  $scope.selectoptions = [];
  Selectoption.query({},function(data) {
    $scope.selectoptions = data;
    console.log(data);
  });
}]);

HTML：

<select ng-model="option_name">
  <option>Select Options</option>
  <option>My Options</option>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>
<div class = "para" ng-repeat = "option in options">
  <p>{{option.id}}</p>
  <p>{{option.value}}</p>
</div>

Answer 1

据我在您的问题陈述中所理解的是，您希望使用选定的下拉值进行API调用并动态更改API URL。

以下是plunker。

我已将控制器稍微更改为将所选值传递给下拉选项中的URL。当前代码无法正常工作，因为它没有正确的API URL但如果您可以执行相同的更改，它将会为你工作。

并在ng-change标记中添加<select>，以便在选择更改时触发API调用。

<强> HTML

<div ng-app="App" ng-controller="OptionController ">

  <select ng-model="option_name" ng-change="selectedOption(option_name)">
    <option>Select Options</option>
    <option>My Options</option>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
  </select>
  <div class="para" ng-repeat="option in options">
    <p>{{option.id}}</p>
    <p>{{option.value}}</p>
  </div>
</div>

<强> JS

var app = angular.module("App", []);
app.controller('OptionController', ['$rootScope', '$scope', '$http', 'Selectoption', function($rootScope, $scope, $http, Selectoption) {

  $scope.selectoptions = [];

  $scope.selectedOption = function(option) {
    Selectoption.query(option).then(function(response) {
      console.log("testing response: " + response);


        $scope.selectoptions = response.data;
        console.log(data);

    }, function(error) {
      console.log(error);
      console.log("could not lget data due to error...");
    });
  };


}]);

app.service('Selectoption', ['$http', '$rootScope', function($http, $rootScope) {

  return {
    query: function(option) {
      return $http.get("http://validUrl/test/" + option, {

      });
    }
  };
}]);

通过在URL参数中从HTML传递用户选择的值来获取Angular JS中的请求

1 个答案: