如何在 angular 下拉列表中显示动态列

Question

我想根据我在控制器中传递的值显示下拉选项

控制器：

This.selectedColumn = label;

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

在上面的代码中，我选择了 selectedColumn 作为标签，那么我应该在下拉列表中显示 dditems.label。如果我将 selectedColumn 作为 subItem 传递，那么我应该在下拉列表中显示 dditems.subItem。

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>

在上面的代码中，我硬编码了 item.label，所以现在显示 item.label 列。但我想显示基于 selectedColumn.

的值

例如：<a>{{ item.selectedColumn }}</a>

我怎样才能做到这种动态方式？

Answer 1

我已经为您的解决方案制作了 Fiddle。您可以将点击事件更改为您希望重复属性更改的任何事件。

根据您的代码，您只需更改任何事件的 selectedColumn 变量即可。

<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>

希望对您有所帮助

如何在 angular 下拉列表中显示动态列

How to display dynamic column in angular dropdown

javascript

angularjs

drop-down-menu

angular-ui-bootstrap