i have three JSON data sources:
countries vendors models
What i want to do is to have all 3 dropdowns dependent!
For example:
when a vendor is selected -> set correspoding country and filter -> self and models
when a model is selected -> filter vendor, filter country and self
when a country is selected -> filter vendor
<ui-select ng-model="countries.id" theme="select2" style="width: 300px;color:red;">
<ui-select-match placeholder="filter by country">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="co in countries | filter: $select.search">
<span ng-bind-html="co.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
<br /><br />
<ui-select ng-model="vendors.id" theme="select2" style="width: 300px;">
<ui-select-match placeholder="filter by vendor">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="ve in vendors | filter: {countryid:countries.id.id}">
<span ng-bind-html="ve.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
<br /><br />
<ui-select ng-model="models.id" theme="select2" style="width: 300px;">
<ui-select-match placeholder="filter by model">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="mo in models | filter: {vendorid:vendors.id.id}">
<span ng-bind-html="mo.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Is this possible? I have a plunk at http://plnkr.co/edit/w9NARA which shows these three dropdowns and the JSON data.
Update I have now a cascading version running, but i also need another version where i can see all entries and for example filter the country by selecting a vendor and simultanously the models should getting filtert, too!