用于依赖选择元素的 AngularJS 指令 [英] AngularJS directive for dependant select element

问题描述

我正在尝试为相关选择元素编写指令.关系是Country>状态 >城市.当具有类 country 的元素发生更改时，我应该更新具有类 states 的元素以及具有类 city 的元素的相同行为.要获取州，我只需要国家 ID，而要获取城市，我需要国家和州 ID.所以我做了这个代码:

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() 语句记录未定义"我对此代码和我正在尝试构建的指令有一些疑问:

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

1. 当 JSON 带有值时，为什么 scope.states 会变成undefined"?
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"?

注意:app 是我定义的 Angular 模块

Note: app is a Angular module I have defined

编辑

我重写了一些代码，现在这是指令:

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 = data 并且它有值，则选择未启用且未填充值?

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-model 的内容

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

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