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);
});
}
}
}]);
But console.log()
statements logs "undefined" I have some questions around this code and the directive I'm trying to build:
- Why
scope.states
get "undefined" when JSON come with values?
- How do I access other select element selected option in order to get "cities"?
Note: app
is a Angular module I have defined
EDIT
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.";
}
});
});
}
}
}]);
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>
Why, if I do this $scope.states = data
and it has values, the select isn't enabled and isn't populated with values?