Angular $ http.get ändert sich aus der Auswahlbox

Question

Ich bin mir nicht sicher, ob dies Sinn ergibt, ich habe einige Zeit damit verbracht, die Antwort zu recherchieren, die ich benötige.

Ich möchte wissen, ob es in angular möglich ist, die URL zu ändern, die von einer $ http.get-Anforderung von einem Wert eines Auswahlfelds angefordert wird.

Also habe ich einen einfachen Controller gebaut, der eine JSON-Datei erhält und die Antwort an den Bereich weiterleitet, dann gebe ich diese Daten an die Ansicht weiter.

Aber ich werde mehrere JSON-Dateien haben, die ich bei Auswahl einer Option aus einem Dropdown laden und die Daten neu laden möchte.

Mein Angular ist ziemlich einfach, also bin ich mir nicht sicher, ob das überhaupt möglich ist.

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> 

Apologies enthalten jetzt Code

Answer 1

Natürlich können Sie.

HTML:

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

Und in Ihrem Controller

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

Das ng-change-Attribut wird ausgelöst, wenn Sie die gewählte Option ändern. Das ng-Modell ermöglicht es Ihnen, den aktuellen Wert im Speicher zu speichern.

Nach Ihrer HTTP-Anfrage (in dann .then) können Sie Ihre JSON und alle Sachen, die Sie tun, laden.

NB: Wenn Ihr wählen Sie ein Materialise ist, verwenden Sie die Winkel materialisieren Bibliothek und

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