[英]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.