javascript - 如何在 Angular 下拉列表中显示动态列

Question

我想根据我在 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'
    }
];

在上面的代码中，我选择了Column作为标签，那么我应该显示 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>

希望对你有帮助