问题描述
我已经开始学习AngularJS昨天。我想用它来创建它使用一个简单的Web服务的Web应用程序。
I have started to learn AngularJS yesterday. I am trying to use it to create a web application which uses a simple web service.
现在我有三个选择框。
Right now I have three select boxes.
首先选择：orgType - >会从在加载该服务的所有orgType（我得到这个工作）
First select : orgType ->gets all orgType from the service at load (I got this working)
第二个选择：语句>填充一堆当地JSON对象的状态（细到这里）
Second select: state-> populates a bunch of states from local json object(fine till here)
第三个选择：cities->获取从Web服务的选定状态的所有城市（这是我坚持我不能得到的第三个选择来填充的状态变化）
Third select: cities-> gets all the cities for the SELECTED state from the web service(this is where I am stuck I can't get the the third select to populate as state changes).
这是我的code现在
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
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;
});
}]);
感谢您的帮助！
推荐答案
创建一个存储你的状态缩写服务
create a service that stores your state abbreviation
.factory('myFactory', function() {
var state = '';
return {
setState: function(val) {
state = val;
},
getState: function() {
return state;
}
}
}
然后你可以看这个服务功能的getState在您的控制器。
then you can watch the getState function in this service in your controller.
$scope.$watch(function () {
return myFactory.getState();
}, function (val) {
// execute your get method with the new value or whatever you want to do
});
当然确保您适当注入所有的依赖关系。
and of course make sure you inject all your dependencies appropriately.
进一步为什么所有这些选择都需要自己的控制？将所有的HTTP调用服务，并让他们都有着相同的范围。
further more why do all of these selects need their own controller? move all the http calls to services and have them all share the same scope.
这篇关于如何通过从AngularJS不同的控制器选择的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！