角度$ http.get選擇框中的變化

Question

我不確定這是否有意義，我花了一些時間試圖研究我需要的答案。

我想知道是否有可能在角度上改變請求從一個$ http.get請求的URL從一個選擇框的值。

所以我建立了一個簡單的控制器，它獲取JSON文件並將響應傳遞給作用域，然後將該數據傳遞給視圖。

但我將有幾個JSON文件，我想加載從下拉列表中選擇一個選項並重新加載數據。

我的角度是相當基本的，所以我不確定這是否有可能在飛行中完成？

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-改變屬性會在您更改所選選項觸發。 ng模型允許您將當前值存儲在內存中。

在你的HTTP請求（然後在.then）後，你可以加載你的JSON和你做的所有事情。

注意：如果你的選擇是一個Materialise公司，使用角兌現庫，並使用

<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>