Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

filter the second selectbox based on the first selected option using angular js

i have 2 select boxes,which is getting the data using ng-options and hardcoded. the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.

$scope.data = [{
        cities: [{
            id: 1,
            title: 'Mysore'
        }, {
            id: 2,
            title: 'Bangalore'
        }, {
            id: 3,
            title: 'Delhi'
        }, {
            id: 4,
            title: 'Mumbai'
        }],
        maps: [{
                id: 1,
                title: 'Zoo',
                city_id: 1
            }, {
                id: 2,
                title: 'Palace',
                city_id: 1
            }, {
                id: 3,
                title: 'Beach',
                city_id: 4
            }]

    }];
like image 950
Thilak Raj Avatar asked Aug 01 '26 20:08

Thilak Raj


1 Answers

You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below

<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>

like image 141
Sameer K Avatar answered Aug 04 '26 11:08

Sameer K



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!