How to display dynamic column in angular dropdown

Question

I want to display dropdown options depending on the value I pass in controller

Controller:

This.selectedColumn = label;

This.dditems = [
    {
        id: 1,
        label: 'aLabel',
        subItem: 'aSubItem'
    },
    {
        id: 2,
        label: 'bLabel',
        subItem: 'bSubItem'
    },
    {
        id: 3,
        label: 'bLabel',
        subItem: 'cSubItem'
    }
];

In above code I have selectedColumn as label, then I should display dditems.label in dropdown. If I pass selectedColumn as subItem, then I should display dditems.subItem in dropdown.

Html:

<ul class="dropdown-menu" role="menu" aria-labelledby="single-button" >
    <li role="menuitem" data-ng-repeat="item in dc.dditems">
       <a>{{ item.label }}</a>
   </li>
</ul>

In above code I have hardcoded item.label, so now item.label column is displaying. But I want to display value based on selectedColumn.

Eg: <a>{{ item.selectedColumn }}</a>

How can I do this dynamic way?

M. Junaid Salaat · Accepted Answer · 2016-03-28 06:24:10Z

1

I've have a made a Fiddle for your solution. You can change the click event with any event you want your repeat property to change.

According to your code you just have to change the selectedColumn variable with any event.

<ul class="dropdown-menu" role="menu" aria-labelledby="single-button" >
    <li role="menuitem" data-ng-repeat="item in dc.dditems">
       <a>{{ item[selectedColumn] }}</a>
   </li>
</ul>

Hope it helps

answered Mar 28, 2016 at 6:24

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

How to display dynamic column in angular dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related