Multiple drop-down based on same list - AngularJS

Question

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

XutNice · Accepted Answer · 2016-11-23 15:00:04Z

0

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>

answered Nov 23, 2016 at 15:00

XutNice

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ajay K Over a year ago

Thanks for spotting that. Appreciate it :)

Collectives™ on Stack Overflow

Multiple drop-down based on same list - AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related