Angular ui-select multiple dropdown filter - angularjs

Question

I have the following list from which I need to create a multiple multi-select dropdown using ui-select
[
{
"Id":1,
"name":"Return on Equity (IFRS)",
"type":"profitability",
},
{
"Id":2,
"name":"Return on Assets (IFRS)",
"type":"profitability",
},
{
"Id":3,
"name":"EBITDA Margin (IFRS)",
"type":"profitability",
},
{
"Id":4,
"name":"EBIT Margin (IFRS)",
"type":"profitability",
},
{
"Id":5,
"name":"Net Profit Margin (IFRS)",
"type":"profitability",
},
{
"Id":8,
"name":"Cash Ratio",
"type":"liquidity",
},
{
"Id":9,
"name":"Quick Ratio",
"type":"liquidity",
},
{
"Id":10,
"name":"Current Ratio",
"type":"liquidity",
},
{
"Id":11,
"name":"Net Financial Liabilities",
"type":"debt",
}
];
I need to be able to select multiple "types" in the first dropdown based on which the corresponding "names" should be shown in the second dropdown. I seem to have hit a roadblock with this. Any help would be appreciated.
This is what I have tried so far. Plunker

Answer 1

let's use 2 custom filters:
app.filter('unique', function() {
return function(collection, keyname) {
return Object.keys(collection.reduce((res, curr) => {
res[curr.type] = curr;
return res;
}, {}));
};
});
app.filter('matchType', function() {
return function(collection, keynames) {
return collection.filter(item => ~keynames.indexOf(item.type));
};
});
unique filter returns an array of strings with unique types and matchType filters array by selected types.
HTML:
<ui-select multiple
ng-model="ctrl.multipleDemo.type"
theme="bootstrap"
style="width: 800px;">
<ui-select-match placeholder="Select type...">{{$item}}</ui-select-match>
<ui-select-choices repeat="type in ctrl.people | unique : 'type'">
<div ng-bind-html="type | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<pre>{{ ctrl.multipleDemo.type | json }}</pre>
<br><br>
<ui-select multiple
ng-model="ctrl.multipleDemo.name"
ng-disabled="!ctrl.multipleDemo.type.length"
theme="bootstrap"
style="width: 800px;">
<ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="person in ctrl.people | matchType : ctrl.multipleDemo.type">
<div ng-bind-html="person.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<pre>{{ ctrl.multipleDemo.name | json }}</pre>
plunker: http://plnkr.co/edit/6aqPwuRwoJdHUmvFOquI?p=preview
TODO: when type is removed from the first select, make sure to remove persons with removed type from the second ng-model