AngularJS chaining select

Question

I'm trying to implement that chained select, but chains aren't working properly.

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

What I want, need: e.g. when selecting 'alpargatas' as category, and with any listed brand selected, the category should be still selected as 'alpargatas' or when selecting 'Calvin Klein' as brand, and with any listed category selected, the brand should be still selected as 'Calvin Klein'.

Any solution, tip or advice?! Tks in advance

Answer 1

You need to use filter in correct order.

For category dropdown

1. add a filter by brand like filter:{brand: filterObject.brand}: true//pass true for strict mode
2. then the unique filter like unique: 'category'
3. and last the orderBy filter like orderBy:'category'

In HTML, it looks like

<select ng-model="filterObject.category" 
        ng-options="c.category as c.category for c in shoes|filter:{brand: filterObject.brand}: true| unique: 'category'| orderBy:'category'">
<option value="" ng-value="undefined">-- Category:</option>

Similar for Brand dropdown

<select ng-model="filterObject.brand" 
        ng-options="b.brand as b.brand for b in shoes|filter:{category: filterObject.category}: true| unique: 'brand'| orderBy:'brand'">
<option value="" ng-value="undefined">-- Brand:</option>

Look both dropdowns are bind with your main data source $scope.shoes so you don't need the additional filter in your controller.

check the updated plunk

Note As @m59 mentioned you shouldn't delete your post when you are looking for an answer.