erhalten Daten vom Server und zeigen sie auf ausgewählten Ereignis mit $ http-Service und ng-change

Question

Ich bin neu in Angular und möchte lernen, wie diese Aufgabe zu erledigen Ich habe ein Dropdown-Menü, das eine Liste von LotType enthält. Wenn ein Lot Typ selected.I ist wollen einen HTTP-GET-Aufruf an einen Web-API-Methode machen, die die Liste der Posten zurück entsprechend dem gewählten Typ

Mein app.js

app.factory('LotService',['$http',function($http){ 
    var factory={}; 
    factory.getLots=function(selectionType){ 
     $http.get('http://localhost:8080/planification/lots/',{ 
     params:{ 
      "type":selectionType 
     } 
     }) 
     .success(function(data){ 
      Lots=data; 
     }) 
    } 
    return factory; 
}]); 

app.controller("ExampleController",['$scope','LotService',function($scope,LotService){ 

    $scope.Types=['particulier','admin','indus']; 
    $scope.getLots=function(selectionType){ 
    $scope.Lots=LotService.getLots(selectionType); 
    } 
    $scope.getLots(selectionType); 
}]); 

mein index.htm

<div class="form-group"> 
    <label class="col-sm-3 control-label">Type client</label> 
    <div class="col-sm-9"> 
     <select class="selectpicker form-control" multiple ng-model="test.type" ng-change="getLots(test.type)"> 
      <option ng-repeat="type in Types" value="{{type}}">{{type}}</option> 
     </select> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label">Lot </label> 
    <div class="col-sm-9"> 
     <select class="selectpicker form-control" ng-model="test.lot"> 
      <option ng-repeat="lot in Lots" value="{{lot}}">{{lot}}</option> 
     </select> 
    </div> 
</div> 

Answer 1

das Problem ist der Dienst keinen Zugriff auf den Umfang der Steuerung (wie sein sollte, da Dienstleistungen, die von jedem Controller benötigen, verwendet werden sollen). Stattdessen sollten Sie das Versprechen von http.get zurück zurück:

factory.getLots=function(selectionType{ 
    return $http.get('http://localhost:8080/planification/lots/', 
     { params: { "type":selectionType } }); 
} 

Dann auf dem Controller die Daten verwenden:

$scope.lots = lotsFactory.getLots().success(function(data) { 
    $scope.lots=data; 
}); 

Answer 2

Die getLots Funktion in Ihnen Service ein Versprechen zurückgeben muss und dann den Wert verschieben was du bekommst, indem du den $ http-Aufruf machst. In Ihrem Controller verwenden Sie dann zu warten, bis der http-Aufruf beendet ist und binden Sie dann die Daten an Ihre Bereichsvariable.

app.factory('LotService',['$http' '$q',function($http, $q){ 
    var factory={}; 
    factory.getLots=function(selectionType){ 
    var defer = $q.defer(); 
     $http.get('http://localhost:8080/planification/lots/',{ 
     params:{ 
      "type":selectionType 
     } 
     }) 
     .success(function(data){ 
      defer.resolve(data) 
     }) 
    return defer.promise; 
    } 
    return factory; 
}]); 

app.controller("ExampleController",['$scope','LotService',function($scope,LotService){ 

    $scope.Types=['particulier','admin','indus']; 
    $scope.getLots=function(selectionType){ 
    LotService.getLots(selectionType).then(function(data) { 
    $scope.Lots = data; 
}) 
    } 
    $scope.getLots(selectionType); 
}]); 

EDIT
ich ein Fiedler für die Lösung geschaffen haben. Überprüfen Sie es here. Ich kann keinen $ http Anruf von Fiddler machen, also habe ich die Daten verspottet. Die Daten werden im Dropdown-Menü ausgewählt.