Changing value of a select triggers an event on another select in Angularjs

Question

I'm new to angular. I wonder if this could be done. I have tow select elements. One for province and one for city. I want to update the city select element when province changes. I wrote tow directives that fetch data from server using angular services. But I have no idea how to say city that province has changed when user changes province. Actually I want to know if I can trigger an event on city directive when a change occurs on province directive. I googled this but could not find a solution. Any help is appreciated in advance. Here is my directives:

Province Directive

'use strict';
app.directive('province', function (Province, $rootScope) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "/Templates/Directives/province.html",        
        link: function(scope, element, attr, controller) {
            var elm = angular.element(element);
            elm.attr('id', attr['id']);
            elm.attr('name', attr['name']);
            elm.attr('class', attr['class']);
            elm.attr('ng-model', attr['ng-model']);            
            Province.get().then(function (provinces) {
                scope.provinces = provinces;                
            });            

        }

    };

})

City Directive

'use strict';
app.directive('city', function (City, $rootScope) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/Templates/Directives/city.html',
        link: function (scope, element, attr, controller) {            
            var elm = angular.element(element);
            elm.attr('id', attr['id']);
            elm.attr('name', attr['name']);
            elm.attr('class', attr['class']);
            elm.attr('ng-model', attr['ng-model']);            
            City.getByProvince(8).then(function (cities) {
                scope.cities = cities;
            });                        
    }
    };

})

And here is my templates:

province.html

<select>
    <option ng-repeat="province in provinces" value="{{province.provinceId}}">    {{province.provinceName}}</option>
</select>

city.html

<select>
    <option ng-repeat="city in cities" value="{{city.cityId}}">{{city.cityName}}    </option>
</select>

Mathew Berg · Accepted Answer · 2014-02-18 13:32:26Z

1

First go read up on how to implement ng-options (http://docs.angularjs.org/api/ng/directive/select). Also add an ng-change onto your province select. Your code will change to this:

<select data-ng-model="selectedProvince" data-ng-options="province.provinceId as province.provinceName for province in provinces" data-ng-change="provinceChanged()"></select>

Then in your link function for your province directive fire off a provinceChanged event when the ng-change fires:

scope.selectedProvince = false;
scope.provinceChanged = function(){
if(!scope.selectedProvince){ return; }
    $rootScope.$broadcast("provinceChanged", { province: scope.selectedProvince });
};

And in your city directive listen in for that event:

scope.$on("provinceChanged", function(event, data){
    console.log(data.province); //selected province
});

answered Feb 18, 2014 at 13:32

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing value of a select triggers an event on another select in Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related