utkarsh2k2 utkarsh2k2 - 5 months ago 64
AngularJS Question

Filter and display the options of a dropdown, based on the selected value of another dropdown

I have created two dropdowns using ng-options, in angularJS. The dropdown options get populated by two different array

type_names
and
names
. Both array contain objects as element. Below is the HTML code

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedTypeName" ng-options="item.id as item.text for item in type_names">
</select>

<select ng-model="selectedName" ng-options="item.id as item.text for item in names|filter:{type:'others'}">
</select>

</div>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>


Below is the AngularJS script

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type_names = [
{id: '0', type: 'me', text: 'Master of Computer Engineering'},
{id: '1', type: 'msc', text: 'Master of Computer Science'},
{id: '2', type: 'others', text: 'Others'}
];

$scope.names = [
{id: '', type: 'choose', text: 'Choose a Program'},
{id: '0', type: 'msc', text: 'Masters - Information Systems Management'},
{id: '1', type: 'msc', text: 'Masters - Software Engineering'},
{id: '2', type: 'msc', text: 'Masters - Computer Security'},
{id: '3', type: 'others', text: 'Bachelors of Computer Science'},
{id: '4', type: 'others', text: 'Exchange Program'},
{id: '5', type: 'others', text: 'Study Abroad'},
{id: '6', type: 'others', text: 'Scientific Summer School'},
{id: '7', type: 'others', text: 'French Summer School'},
{id: '8', type: 'me', text: 'ME - Global IT Management'},
{id: '9', type: 'me', text: 'ME - Software Development and Multimedia'},
{id: '10', type: 'me', text: 'ME - Systems, Networks and Security'}
];
});


As you can see I have used
filter:{type:'others'}
in the second dropdown, so that It'll only display options with
type: others
. Now my objective is to populate the type value(eg.
me
,
others
or
msc
) in
filter:{type:'others'}
automatically, based on the option selected in the first dropdown. For scalability and robustness I do not want to use if/else condition inside the HTML(twig) code.

Note: I am trying to use AngularJS with Symfony2(PHP framework)

Any ideas?

Answer

Solution 1

You can use the type in first dropdown as a filter in second :

http://plnkr.co/edit/Bxr8I3tahgzRluI4TIaW?p=preview

<select ng-model="selectedTypeName" 
        ng-options="item.type as item.text for item in type_names">
</select>
<select ng-model="selectedName" 
        ng-options="item.id as item.text for item in names|filter:{type:selectedTypeName}">
</select>

What is happening : Instead of id:text pair in first dropdown, type:text pair is used. So the value of the first dropdown will be type and not id;


Solution 2

And if you want your id as the value for the first select and not the type, then you can use ngChange for that :

<select ng-model="selectedTypeId" 
        ng-change="selectedType=(type_names|filter:{id:selectedTypeId})[0].type" 
        ng-options="item.id as item.text for item in type_names">
</select>
<select ng-model="selectedName" 
        ng-options="item.id as item.text for item in names|filter:{type:selectedType}">
</select> 

What is happening : Whenever a different option is selected in fiorst dropdown, it updates the selectedType to the type of the option selected. And that is used for the purpose of filtering the data in the second dropdown.


You can default the dropdown values (like you did : others), by setting model values in controller :

$scope.selectedTypeId = '2';
$scope.selectedType = 'others';
Comments