javascript AngularJS 将变量传递给工厂

AngularJS pass variable into factory

提问by Hunter

I have the following selectlist:

我有以下select清单：

<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, selectCityinto a factory which calls an API:

当我改变所选择的选项，我需要打发ng-model，selectCity到工厂它调用的API：

The factory:

该工厂：

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

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

});

回答by vamsikrishnamannem

I solved your problem write html here

我解决了你的问题在这里写html

<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

和 javascript 在这里

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

工作示例在这里

回答by Tom

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

您可以使用ng-change选择列表中的属性并从那里调用您的 API。您还需要在getAPIcarModels函数中采用一个参数：

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')
}

回答by Showkath

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

你需要添加类似的东西 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

回答by Shehryar Abbasi

alternatively: using ng-options:

view:

或者：使用ng-options：

查看：

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

js：

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

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

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

工作示例：https: //jsfiddle.net/pz9f093e/