get Data from server and display it on select event using $http service and ng-change

Question

I am new to Angular and would like to learn how to accomplish this task I have a dropdown that contains a list of LotType. When a Lot type is selected.I want to make an HTTP GET call to a web API method which returns the list of Lots according to the selected Type

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

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

Gershon Papi · Accepted Answer · 2016-04-18 17:07:51Z

2

The problem is the service doesn't have access to the scope of the controller (as should be since services should be used by any controller in need). Instead you should return the promise returned by http.get:

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

Then on the controller use the data:

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

answered Apr 18, 2016 at 17:07

Gershon Papi

5,1263 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pratik Bhattacharya · Accepted Answer · 2016-04-19 08:25:20Z

1

The getLots function in you service needs to return a promise and then defer the value which you get by making the $http call. In your controller use .then to wait until the http call is over and then bind the data to your scope variable.

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
I have created a fiddler for the solution. Check it here. I can't make a $http call from Fiddler so I have mocked the data. The data is getting binded in the select dropdown.

edited Apr 19, 2016 at 8:25

answered Apr 18, 2016 at 17:47

Pratik Bhattacharya

3,7562 gold badges38 silver badges66 bronze badges

2 Comments

hind Over a year ago

thanks lot for you answer, i can get data from server and display it into paragraphs, but i can't display the result in <select>

Pratik Bhattacharya Over a year ago

Look at my edit. You can check the fiddler here - jsfiddle.net/pratikjs/Lvc0u55v/2619. Also check if you are getting an array of string from the server, else you will have to change the ng-options implementation for the select tab.

Collectives™ on Stack Overflow

get Data from server and display it on select event using $http service and ng-change

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related