AngularJS指令供养选择元素 [英] AngularJS directive for dependant select element

问题描述

我试着写相关的选择元素的指令。关系是国家＆GT;国家＆GT;城市。当与class元素国家得到改变，我应该更新类状态元素和使用类元素<相同的行为code>城市。要获得美国我只需要在全国ID和GET城市，我需要的国家和国家的ID。所以我做了这个code：

I'm trying to write a directive for dependant select elements. The relationship is Country > States > Cities. When element with class country get changed I should update element with class states and the same behavior for element with class city. To get the states I only need the country id and for get cities I need country and state id's. So I did this code:

app.directive('country', ['$http', function($http) {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.change(function() {
                    $http.get(Routing.generate('states') + '/' + element.val()).success(function(data) {
                        if (data.message) {
                            scope.message = data.message;
                        } else {
                            scope.states = data;
                        }
                    }).error(function(data, status, headers, config) {
                        if (status == '500') {
                            scope.message = "No hay conexión con el servidor.";
                        }
                    });

                    console.log(scope.states);
                    console.log(scope.message);

                });
            }
        }
    }]);

但的console.log（）语句日志未定义我有解决这个code，我试图建立指令一些问题：

But console.log() statements logs "undefined" I have some questions around this code and the directive I'm trying to build:

1. 为什么 scope.states 得到未定义时，JSON配备了价值？


2. 如何访问其他选择元素选定的选项，以获得城市？

1. Why scope.states get "undefined" when JSON come with values?
2. How do I access other select element selected option in order to get "cities"?

请注意：应用是我已经定义了一个角的模块

Note: app is a Angular module I have defined

修改

我重写一些code和现在这个指令：

I rewrite some code and now this is the directive:

app.directive('country', ['$http', function($http) {
        return {
            restrict: 'C',
            link: function($scope, element, attrs) {
                element.change(function() {
                    $http.get(Routing.generate('states') + '/' + element.val()).success(function(data) {
                        if (data.message) {
                            $scope.message = data.message;
                        } else {
                            $scope.states = data;
                        }
                    }).error(function(data, status, headers, config) {
                        if (status == '500') {
                            $scope.message = "No hay conexión con el servidor.";
                        }
                    });
                });
            }
        }
    }]);

林我的模板我有这样的HTML：

Im my template I have this HTML:

<select 
     id="common_commonbundle_standard_address_state" 
     ng-model="common_commonbundle_standard_address.state" 
     required="required" 
     ng-disabled="!states" 
     ng-options="state.name for state in states.entities" 
     tooltip="Estado" 
     tooltip-trigger="focus" 
     tooltip-placement="right" 
     wv-def="Estado" 
     wv-cur="" 
     wv-err="Error!" 
     wv-req="The value you selected is not a valid choice" 
     type="text" 
     class="state ng-scope ng-pristine ng-invalid ng-invalid-required"         
     var="common_commonbundle_standard_address.country" 
     disabled="disabled">
</select>

为什么，如果我这样做 $ scope.states =数据，它有值，则选择不启用，不与值填充？

Why, if I do this $scope.states = data and it has values, the select isn't enabled and isn't populated with values?

推荐答案

喜欢评论提到，你需要将你的控制台记录你的成功回调内部。这是异步请求的只是性。

like the comment alluded to, you need to move your console logging inside of your success callback. that's just the nature of asynchronous requests.

有关1）

  $http.get(Routing.generate('states') + '/' + element.val()).success(function(data) {
    console.log('success!');
    if (data.message) {
      scope.message = data.message;
    } else {
      scope.states = data;
    }
    console.log(scope.states);
    console.log(scope.message);
  }).error(function(data, status, headers, config) {
    if (status == '500') {
      scope.message = "No hay conexión con el servidor.";
    }
  });

有关2）
你想使用什么是越来越设置为NG-模型

For 2) You would want to use whatever is getting set to ng-model

这篇关于AngularJS指令供养选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！