サーバーからデータを取得し、$ httpサービスとng-changeを使ってselectイベントに表示します

Question

私はAngularを初めて使っています。このタスクを達成する方法を学んでいます 私はLotTypeのリストを含むドロップダウンを持っています。ロットタイプがselected.Iあるとき

マイ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); 
}]); 

私のindex.htmを選択したタイプに応じたロットのリストを返すWeb APIメソッドにHTTP GETコールを作りたいです

<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

問題はサービスがコントローラのスコープにアクセスできないことです（必要なコントローラでサービスを使用する必要があるため）。あなたのサービスでgetLots機能が約束を返し、その後、値を延期する必要が

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

Answer 2

：データを使用して、コントローラに続いて

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

：代わりに、http.getによって返された約束を返す必要がありますこれは$ http呼び出しを行うことで得られます。あなたのコントローラでは、http呼び出しが終了するまで待ってから、スコープ変数にデータをバインドします。私は解決策のためにシオマネキを作成している

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
。それを確認してくださいhere。私はFiddlerから$ httpコールを作ることができないので、データを嘲笑しました。選択ドロップダウンでデータがバインドされています。