Display a list of options based on another choice in Angular

Question

I have two drop-down select lists, where the options in the second selection depend on which option is selected on the first selection.

I'm currently trying to figure out how I should return my data from the server, which will depend on how I set my filter(s) .

I would appreciate an input or suggestion of what is best suited for filtering data structures using the multiple select drop-down menu.

Just in case, this is of interest to someone over whom I am developing / testing with a stable version of AngularJS (v1.3.15).

Data Structure 1 - Nested:

 $scope.optionObjs = [ { id: 1, name: 'option 1', desc: '', elements: [ { id: 9, name: 'option 11', desc: '', }, { id: 10, name: 'option 12', desc: '', }, { id: 11, name: 'option 13', desc: '', }, { id: 12, name: 'option 14', desc: '', }, { id: 13, name: 'option 15', desc: '', }, ], }, ]; 

I was hoping to use an angular filter, as in the following example in my html, but did not seem to work.

 <select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select> <select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select> 

Update:

Well, this is very stupid from me. All that was required for the above data structure in order to meet my requirements is a simple change in the second html selection ( no special filter function is required ).

 <select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs"></select> <select data-ng-model="secondSelect" data-ng-options="option.name for option in firstSelect.elements"></select> 

That's all. Doy !!!

Data Structure 2 - w / Parent Link:

 $scope.optionObjs = [ { id: 1, parent: null, name: 'option 1', desc: '', }, { id: 9, parent: 1, name: 'option 11', desc: '', }, { id: 10, parent: 1, name: 'option 12', desc: '', }, { id: 11, parent: 1, name: 'option 13', desc: '', }, { id: 12, parent: 1, name: 'option 14', desc: '', }, { id: 13, parent: 1, name: 'option 15', desc: '', }, ]; 

Following this example, I will need to write a filter for the first choice to display only those parameters that do not have a parent link.

 <select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter:parent=null"></select> <select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter:firstSelect"></select> 

Update:

Considering the @adamjld suggestion and experimenting with the Angular filter , I came up with the following html update to go along with the data structure above ( no custom filter function required ).

 <select data-ng-model="firstSelect" data-ng-options="option.name for option in optionObjs | filter : { parent: null, }"></select> <select data-ng-model="secondSelect" data-ng-options="option.elements.name for option in optionObjs | filter : { parent: firstSelect.id, }"></select> 

Although this is a much simpler solution, there is a slight problem with this on boot. Since I do not initialize firstSelect as an object with a scope in my controller, the second selection flag allows users to select whatever option they want. But as soon as an option is selected in the first selection window, the second window's selection options are selected, and only the corresponding (parent) firstSelect.id parameters are firstSelect.id .

References

Just in case, people start complaining that I did not use the search at all, here are a few links: angular filter
ng-repeat: filter by single field

Answer 1

I think this will do what you are looking for .. I edited the data to show that it works a little better. I split your data into two arrays, parent and child.

 $scope.parentOptionObjs = [{ id: 1, name: 'option 1', desc: '' }, { id: 2, name: 'option 2', desc: '' }]; $scope.childOptionObjs = [{ parent: 1, id: 9, name: 'option 11', desc: '' }, { parent: 1, id: 10, name: 'option 12', desc: '' }, { parent: 1, id: 11, name: 'option 13', desc: '' }, { parent: 2, id: 12, name: 'option 14', desc: '' }, { parent: 2, id: 13, name: 'option 15', desc: '' }]; }); 

Now the children are filtered by parent ID using the following filter.

 app.filter('secondDropdown', function () { return function (secondSelect, firstSelect) { var filtered = []; if (firstSelect === null) { return filtered; } angular.forEach(secondSelect, function (s2) { if (s2.parent == firstSelect) { filtered.push(s2); } }); return filtered; }; }); 

Fiddle

Answer 2

Set the ng model at the first drop-down list, select ng-model = "drp1Value"

In the second drop-down list, select ng-disabled = "drp1Value == null"