Javascript 如何在AngularJS中传递来自不同控制器的选定值_Javascript_Jquery_Angularjs

Javascript 如何在AngularJS中传递来自不同控制器的选定值

javascript jquery angularjs

Javascript 如何在AngularJS中传递来自不同控制器的选定值,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我昨天开始学安加拉语。我正在尝试使用它创建一个使用简单web服务的web应用程序。现在我有三个选择框。首先选择：orgType->在加载时从服务获取所有orgType（我得到了这个工作）第二个选择：state->从本地json对象填充一组状态（在这里还可以）第三次选择：城市->从web服务获取所选州的所有城市（这就是我被卡住的地方，我无法获取第三次选择以在州更改时填充）这是我现在的代码 HTML: 谢谢你的帮助如果您试图从与页面所在域不同的url访问数据，可能会遇到问题。基本上

我昨天开始学安加拉语。我正在尝试使用它创建一个使用简单web服务的web应用程序。

现在我有三个选择框。

首先选择：orgType->在加载时从服务获取所有orgType（我得到了这个工作）

第二个选择：state->从本地json对象填充一组状态（在这里还可以）

第三次选择：城市->从web服务获取所选州的所有城市（这就是我被卡住的地方，我无法获取第三次选择以在州更改时填充）

这是我现在的代码

HTML:

谢谢你的帮助

如果您试图从与页面所在域不同的url访问数据，可能会遇到问题。基本上这不是一个问题，而是一个安全特性，web浏览器允许web页面a中包含的脚本访问web页面B中的数据，但前提是两个web页面具有相同的源。原点定义为URI方案、主机名和端口号的组合

处理此问题的一个典型解决方案是在web服务的url中传递回调函数名

somewebapiendpoint?callback=some_function_name

假设webapi端点将返回封装在某个函数名脚本中的结果。因为服务器可以在页面内执行脚本，所以在这种方法上应该小心（基本上信任服务器：）

另一个解决方案是启用创建存储州缩写的服务

.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模型添加到州和城市选择中，这样我们就可以进行双向绑定。然后在状态

上使用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>

或者，您可以为selectedState创建一个watch函数来实现相同的功能。希望获得此帮助~

为了在控制器之间共享数据，您应该创建一个服务。但是，在这种情况下，我在

上有一个控制器，可以访问

选择元素的每个模型
<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>


{{types.type}
{{state.缩写}}
{{city.city}

也可以考虑使用。最好将您的数据保留在
$scope
之外，因为它有助于分离关注点，并且更符合Angular2体系结构。
问题是什么？您想知道如何将select state变量传递给citiesController？或者您能够获得select状态，但不是即时的？我不知道如何传递我尝试过的变量ng change=函数。但是我没能理解你是从外部web服务读取的吗？你可以创建一个shareService来传递变量。是的，我是从外部服务读取的，正在研究shareService是什么。我知道什么是CORS，我正在使用代理来避免这种情况。我对angular框架是完全陌生的，这似乎是一件非常琐碎的事情，我无法弄清楚我想要的是当有人在第二个选择中选择一个状态时，让第三个选择填充。这与angular无关。
 <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>

myApp.controller('myCtrl', function($http, $scope){    
    $scope.changedState=function(selectedState){
      $http.get('url?state='+selectedState).success(data){
          $scope.cities = data;
      };
    }       
}

<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>