javascript - Displaying list of options based on another select in Angular -

i have 2 select dropdowns options in second select depend on option selected in first select.

at moment trying figure out way should return data server depend on way setup filter(s).

i appreciate input or suggestion on best practices when comes filtering data structures using multiple select dropdown's.

just in case of interest developing/testing stable version of angularjs (v1.3.15).

data struct 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 hoping utilise angular filter like following example in html didn't seem work.

<select data-ng-model="firstselect" data-ng-options="option.name option in optionobjs"></select>  <select data-ng-model="secondselect" data-ng-options="option.elements.name option in optionobjs | filter:firstselect"></select> 

update:

ok, super silly of me. took above data structure adhere requirements simple change second select html (no custom filter function required).

<select data-ng-model="firstselect" data-ng-options="option.name option in optionobjs"></select>  <select data-ng-model="secondselect" data-ng-options="option.name option in firstselect.elements"></select> 

that all. d'oh!!!

data struct 2 - w/ parent reference:

$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: '', }, ]; 

going forward example have write filter first select display options have no parent reference.

<select data-ng-model="firstselect" data-ng-options="option.name option in optionobjs | filter:parent=null"></select>  <select data-ng-model="secondselect" data-ng-options="option.elements.name option in optionobjs | filter:firstselect"></select> 

update:

taking account suggestion @adamjld , experimenting more angular filter have come following html update go along above data structure (no custom filter function required).

<select data-ng-model="firstselect" data-ng-options="option.name option in optionobjs | filter : { parent: null, }"></select>  <select data-ng-model="secondselect" data-ng-options="option.elements.name option in optionobjs | filter : { parent: firstselect.id, }"></select> 

while simpler solution there slight problem on initial load. because not initialise firstselect scoped object in controller second select box allows users select option want. option selected in first select box second select box options filtered , corresponding options (parent) firstselect.id displayed.

references

just in case people start complaining didn't utilise search @ here references: angular filter
ng-repeat :filter single field

i think looking for.. edited data show working bit better. split data 2 arrays, parent , 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: ''     }]; }); 

the children filtered id of parent using 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