CODEWITHSUNDEEP
angularjsangularjs-directive
Beginner
Beginner

Reputation: 1030

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

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>

Upvotes: 0

Views: 2337

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

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
});

Upvotes: 1

Related Questions