Angular $http.get 从选择框中更改

Question

我不确定这是否有意义，我花了一些时间试图研究我需要的答案。

我想知道是否可以在角度上将 $http.get 请求中请求的 URL 从选择框的值中更改。

所以我构建了一个简单的控制器，它获取一个 JSON 文件并将响应传递到作用域，然后我将该数据传递到视图。

但是我将有几个 JSON 文件，我想在从下拉列表中选择一个选项时加载这些文件并重新加载数据。

我的 Angular 是相当基础的，所以我不确定这是否可以即时完成？

var app = angular.module('serverstats', []);
 app.controller('ServerController', function($scope, $http){
 var apiFeed = $('.apiSelecter').val();
  $http.get(apiFeed).then(function(response){
$scope.status = response.data;

$scope.server = [];
angular.forEach($scope.status.servers, function(svr) {
    $scope.server.push(svr);
 })
console.log('server', $scope.server);

  });
});


<select class="apiSelecter">
  <option value="/test.json">Data File 1</option>
  <option value="/test1.json">Data File 2</option>
  <option value="/test2.json">Data File 3</option>
</select>


<div ng-controller="ServerController" id="server-stats" class="server-stats">
      <div ng-repeat="stat in server" class="container" ng-cloak>
        <div class="stats-box col-md-2">
          <p class="lead">Server Name: {{ stat.serverName }}</p>
        </div>
        <div class="stats-box col-md-2">
          <p class="lead">Response Time: {{ stat.responseTime }}</p>
        </div>
        <div class="stats-box col-md-2">
          <ul>
          <p class="lead">Ports</p>
            <li><p class="lead">{{ stat.ports.port1 }}</p></li>
            <li><p class="lead">{{ stat.ports.port2 }}</p></li>
            <li><p class="lead">{{ stat.ports.port3 }}</p></li>
            <li><p class="lead">{{ stat.ports.port4 }}</p></li>
            <li><p class="lead">{{ stat.ports.port5 }}</p></li>
          </ul>
        </div>

道歉现在包含代码

Answer 1

当然可以。

HTML：

<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
                    <option ng-repeat="o in options" value="{{o.url}}">{{o.label}}</option>
</select>

在你的控制器中

$scope.options = [
   {url : 'www.google.com', label: 'google'},
   {url : 'www.facebook.com', label:'facebook'}
]
$scope.myMethod = function() {
    console.log($scope.myValue);
    //HTTP Resquest here
}

ng-change 属性将在您更改所选选项时触发。 ng-model 允许您将当前值存储在内存中。

在您的 HTTP 请求（当时是 .then）之后，您可以加载您的 JSON 以及您所做的所有事情。

注意：如果您的选择是 Materialize，请使用 angular-materialize 库并使用

<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
                        <option ng-repeat="o in option" value="{{o.url}}" material-select watch>{{o.label}}</option>
</select>