Chandan Chandan - 14 days ago 4
AngularJS Question

Multiple drop-down based on same list - AngularJS

I have a data list from which I need to create multiple drop-downs.

[
{
"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",

}
];


There are multiple "type" vales and "name" associated with each type. I need to display the "name" in the dropdown based on the type selected in the first dropdown. For example, if in the first dropdown "type" selected is "liquidity", then I need the need to populate the next dropdown with the "name" associated with "liquidity" ie "Cash Ratio", "Quick Ratio" and "Current Ratio".

This is what I have tried so far.
Plunker

Answer

Your solution was close to the final result but you were comparing in your filter a object with a element (type) of the object. I just show you the only part of your Plunker to modify to do what you're looking for.

<select ng-model="nameng" ng-options="option.name for option in models | filter:{type:typeng.type}">
    <option ng-disabled="true"  ng-selected="true" value="">Select a name</option>
</select>