AngularJS传递变量到工厂

Question

我有以下的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>

当我改变所选的选项时，我需要将ng-model和selectCity传递到一个工厂中，该工厂调用一个API：

这个工厂：

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

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

});

- Hunter

---

可能是重复的问题：如何将变量传递给AngularJS工厂 - Robin Vinzenz

selectCity是从哪里来的？难道你不需要将其作为参数放入吗？ - Eugene J. Lee

@YuujinLee 这是来自于 <select ng-model="selectCity"></select>。 - Hunter

Answer 1

我解决了你的问题，在这里编写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>

并在此处添加 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);
  };

}

示例代码在这里

- vamsikrishnamannem

---

我可以问另一个问题吗？我如何将$routeParams作为参数传递到工厂中呢？ - Hunter

获取 $routeParams 值，就像这里所示的相应控制器一样 https://thinkster.io/a-better-way-to-learn-angularjs/routeparams-api，然后像这样传递它： APIservices.getAPIcarModels($routeParams.routeParamsName); - vamsikrishnamannem

现在当我实施你的代码时，现有的参数不起作用了，我必须传递两个参数或者找到另一种方法来代替第一个参数 - 有什么想法吗？ - Hunter

让我们在聊天中继续这个讨论。 - vamsikrishnamannem

好的，忘记$routeParams吧，我不想让你感到困惑。只需要想象我有另一个选择标签，就像我们已经做过的一样：http://jsfiddle.net/VSph2/593/ - Hunter

虽然在这种情况下不需要向工厂方法传递参数，但在其他情况下是否有必要呢？ - eran otzap

Answer 2

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

您的标记将如下所示：

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

在您的控制器中：

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

最后，您的工厂：

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

- Tom

Answer 3

您需要添加类似于ng-change="changeCity(selectCity)"的内容。

请参考以下文章以获取示例和更多信息。

http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
https://dev59.com/54Tba4cB1Zd3GeqP6XVW    
https://dev59.com/dl8e5IYBdhLWcg3wPYhA

- Showkath

Answer 4

或者：使用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：

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

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

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

- Shehryar Abbasi