Question

我昨天开始学习AngularJS。我正在尝试使用它来创建一个使用简单Web服务的Web应用程序。

现在我有三个选择框。

首先选择：orgType - ＆gt;从加载服务中获取所有orgType（我得到了这个工作）

第二个选择：state-＆gt;从本地json对象填充一堆状态（直到这里）

第三选：城市 - ＆gt;从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;
        });

    }]);

感谢您的帮助！

Answer 1

创建一个存储州缩写

的服务

.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调用移动到服务并让它们共享相同的范围。

Answer 2

你想要这么多控制器有什么特别的理由吗？对于你有的简单页面，一个就足够了。 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创建一个watch函数来实现同样的功能。希望这有帮助〜

Answer 3

如果您尝试访问与您的网页不同的网址中的数据，则可能会遇到Same Origin Policy问题。基本上这不是问题，而是一种安全功能，其中Web浏览器允许网页A中包含的脚本访问网页B中的数据，但仅当两个网页具有相同的源时。原点定义为 URI方案，主机名和端口号的组合。

解决此问题的一种典型解决方案是在Web服务的url中传递回调函数名称。

somewebapiendpoint?callback=some_function_name

如果webapi端点将返回包含在some_function_name脚本中的结果。由于服务器可以在页面内执行脚本，因此您应该小心（基本上相信服务器:)）关于这种方法。

另一种解决方案是启用CORS

Answer 4

要在控制器之间共享数据，您应该创建一个服务。但是，在这种情况下，我会在<div id="test">上有一个控制器，可以访问每个select元素＆＃39; 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 syntax。最好将数据保留在$scope之外，因为它有助于分离问题并且更符合Angular2架构。

如何从AngularJS中的不同控制器传递选定的值

4 个答案: