[英]How to pass the selected value from different controllers in AngularJS
我昨天开始学习AngularJS。 我正在尝试使用它来创建使用简单Web服务的Web应用程序。
现在我有三个选择框。
首先选择：orgType->在加载时从服务中获取所有orgType（我已经开始工作了）
第二选择：state->从本地json对象填充一堆状态（直到此处为止）
第三选择：citys->从Web服务获取SELECTED状态的所有城市（这是我无法解决的问题，因为状态变化，我无法获取第三选择来填充）。
这是我现在的代码
HTML：
<body>
<div id='test'>
<select class="form-control" ng-controller="typeController" >
<option ng-repeat="types in row" >{{types.type}}</option>
</select>
<select class="form-control" ng-controller="statesController" >
<option ng-repeat="state in states" >{{state.abbreviation}}</option>
</select>
<select class="form-control" ng-controller="citiesController" >
<option ng-repeat="city in cities" >{{city.city}}</option>
</select>
</div>
</body>
</html>
Controllers.js
var myApp=angular.module('myApp',[]);
myApp.controller('typeController',['$scope','$http',function ($scope,$http){
$http.get('someURL path=%2FOrgTypes').success(function(data){
var jsonData = $.xml2json(data);
console.log(jsonData.row);
$scope.row=jsonData.row;
});
}]);
myApp.controller('statesController',['$scope','$http',function ($scope,$http){
$http.get('data/states.json').success(function(data){
console.log('states',data);
$scope.states=data;
});
}]);
myApp.controller('citiesController',['$scope','$http',function changeCity($scope,$http){
$http.get('someURL ?path=/Cities?state=MD').success(function(data){
//hardcoding city to MD for now
var jsonData = $.xml2json(data);
console.log('cities', jsonData);
$scope.cities=jsonData.row;
});
}]);
谢谢你的帮助！
创建一个存储状态缩写的服务
.factory('myFactory', function() {
var state = '';
return {
setState: function(val) {
state = val;
},
getState: function() {
return state;
}
}
}
那么您就可以在控制器中观看此服务中的getState函数。
$scope.$watch(function () {
return myFactory.getState();
}, function (val) {
// execute your get method with the new value or whatever you want to do
});
当然，请确保您适当地注入了所有依赖项。
此外，为什么所有这些选择都需要自己的控制器？ 将所有http调用移至服务，并使它们都共享相同的作用域。
您想要这么多控制器有什么特殊原因吗？ 对于您拥有的简单页面，一个就足够了。 ng-change是正确的方法。 您需要做的第一件事是将ng-model添加到州和城市选择中，以便我们进行双向绑定。 然后在select的状态上使用ng-change来接收选择的状态，并对该城市进行相应的操作。
例
<div ng-app="myApp" >
<div ng-controller="myCtrl">
<select class="form-control" ng-model="selectedState" ng-change="changedState(selectedState)">
<option ng-repeat="state in states" >{{state.abbreviation}}</option>
</select>
<select class="form-control" ng-model="citiesController" >
<option ng-repeat="city in cities" >{{city.city}}</option>
</select>
</div>
</div>
js：
myApp.controller('myCtrl', function($http, $scope){
$scope.changedState=function(selectedState){
$http.get('url?state='+selectedState).success(data){
$scope.cities = data;
};
}
}
或者，您可以为selectedState创建一个监视函数以实现相同的目的。 希望有帮助〜
为了在控制器之间共享数据，您应该创建一个服务。 但是，在这种情况下，我在<div id="test">上只有一个控制器，该控制器可以访问每个select元素的ngModels。
<body>
<div id="test" ng-controller="MyFormController">
<select class="form-control" ng-model="type">
<option ng-repeat="types in row" >{{types.type}}</option>
</select>
<select class="form-control" ng-model="state">
<option ng-repeat="state in states" >{{state.abbreviation}}</option>
</select>
<select class="form-control" ng-model="city">
<option ng-repeat="city in cities" >{{city.city}}</option>
</select>
</div>
</body>
另外，请考虑使用controllerAs语法 。 最好将您的数据放在$scope ，因为它有助于分离问题，并且更符合Angular2架构。
如何在Angularjs的contextscope中传递从下拉列表中选择的值？
[英]How to pass the value selected from dropdown in contextscope in Angularjs?
如何链接来自不同控制器/位置的AngularJS Promise？
[英]How to chain AngularJS promises coming from different controllers / places?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.