角度$ 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-modelでは、現在の値をメモリに格納することができます。

あなたのHTTPリクエスト（.then）の後に、JSONとあなたがしているすべてのものを読み込むことができます。

NB：あなたの選択は、マテリアライズものであれば、角度-実体化ライブラリを使用して

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