AngularJS pass variable into factory

Question

I have the following select list:

<select name="make" class="form-control" ng-model="selectCity">
    <option value="Kannur">Kannur</option>
    <option value="Agra">Agra</option>
    <option value="Ahemedabad">Ahemedabad</option>
    <option value="Bangalore">Bangalore</option>
    <option value="Chennai">Chennai</option>
    <option value="Mumbai">Mumbai</option>
</select>

When I change the selected option I need to pass the ng-model, selectCity into a factory which calls an API:

The factory:

carPriceApp.factory('APIservices', function($http){

    APIcarModels = {};
    APIcarModels.getAPIcarModels = function(){
        return $http.get('/carprices3/api/apiData'+ selectCity +'.js')
    }
    return APIcarModels;

});

Where is selectCity coming from? Don't you need to put that as an argument? — Eugene J. Lee
– Eugene J. Lee, Commented May 18, 2015 at 18:30

vamsikrishnamannem · Accepted Answer · 2015-05-18 18:38:08Z

11

I solved your problem write html here

<div ng-controller="myCtrl">
  <select ng-change="changeCity()" name="make" class="form-control" ng-model="selectCity">
    <option value="Kannur">Kannur</option>
    <option value="Agra">Agra</option>
    <option value="Ahemedabad">Ahemedabad</option>
    <option value="Bangalore">Bangalore</option>
    <option value="Chennai">Chennai</option>
    <option value="Mumbai">Mumbai</option>
  </select>
</div>

and javascript here

var app = angular.module('myApp', []);
app.factory('APIservices', function($http) {
  var APIcarModels = {};
  APIcarModels.getAPIcarModels = function(selectCity) {
    alert(selectCity);
    return $http.get('/carprices3/api/apiData'+ selectCity +'.js')
  }
  return APIcarModels;

});

function myCtrl($scope, APIservices) {
  $scope.changeCity = function() {
    APIservices.getAPIcarModels($scope.selectCity);
  };

}

Working example Here

answered May 18, 2015 at 18:38

vamsikrishnamannem

4,8455 gold badges27 silver badges34 bronze badges

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

6 Comments

Hunter Over a year ago

May i ask another question ? How can i pass $routeParams too as a argument in to factory ?

vamsikrishnamannem Over a year ago

Take $routeParams values like respective controllers show here thinkster.io/a-better-way-to-learn-angularjs/routeparams-api and pass like APIservices.getAPIcarModels($routeParams.routeParamsName);

Hunter Over a year ago

Now not working existing argument when i implement your code , I have to pass two argument or I need find another way instead of first argument - Any idea ?

vamsikrishnamannem Over a year ago

Let us continue this discussion in chat.

Hunter Over a year ago

Ok forget $routeParams I dont need confuse you . Just think I have another select tag too same as we have already done jsfiddle.net/VSph2/593

|

Tom · Accepted Answer · 2015-05-18 18:34:57Z

2

You can use the ng-change property on your select list and from there call your API. You'll also need to take a parameter in your getAPIcarModels function:

Your markup would be like:

<select name="make" class="form-control" ng-model="selectCity" ng-change="selectMake()">

And in your controller:

$scope.selectMake = selectMake() {
    APIservices.getAPIcarModels($scope.selectCity);
}

And finally, your factory:

APIcarModels.getAPIcarModels = function(selectCity){
    return $http.get('/carprices3/api/apiData'+ selectCity +'.js')
}

answered May 18, 2015 at 18:34

Tom

7,7401 gold badge26 silver badges49 bronze badges

Comments

Showkath · Accepted Answer · 2015-05-18 18:47:52Z

1

you need to add something like ng-change="changeCity(selectCity)"

Refer below articles for example and more information

http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
http://stackoverflow.com/questions/26485346/how-do-i-get-the-ng-model-of-a-select-tag-to-get-the-initially-selected-option    
http://stackoverflow.com/questions/25935869/id-as-ng-model-for-select-in-angularjs

answered May 18, 2015 at 18:47

Showkath

931 gold badge1 silver badge7 bronze badges

Comments

Shehryar Abbasi · Accepted Answer · 2015-05-18 20:02:30Z

0

alternatively: using ng-options :

view:

<div ng-app='App' ng-controller="AppCtrl">
    <select ng-model="selectedCity" ng-options="city.name for city in cities">
</select>
   Selected City is  {{selectedCity.name}}
</div>

js:

angular.module('App', [])
.controller('AppCtrl', function($scope) {

    $scope.cities = [
        {name: 'Chicago'},
        {name: 'London'}
     ];
    $scope.selectedCity = '';   
});

working example: https://jsfiddle.net/pz9f093e/

answered May 18, 2015 at 20:02

Shehryar Abbasi

3782 silver badges8 bronze badges

Collectives™ on Stack Overflow

AngularJS pass variable into factory

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related