我如何动态地生成一个多层次的下拉菜单

How can I dynamically generate a multi-level dropdown menu with angular?

本文关键字：一个 多层次 下拉菜单 何动态 动态      更新时间：2023-09-26

我使用bootstrap制作了一个带有多个复选框的下拉菜单(参见http://jsfiddle.net/rxdazn/ryzJb/3/)。这个下拉菜单将引入在同一图表上绘制多个图形("测量")的可能性+多个选项(对数比例尺等)。

一个值列表(对应于"measures")将被存储在json对象中。现在，我只使用一个选择(用户只能绘制一个图表，没有图形类型和选项):

<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>

我怎样才能最好地处理每个度量类型将具有相同子菜单的事实?
我应该改变我的HTML吗?我应该动态生成<input> id属性的值吗?

<!-- graph type -->
<li class="dropdown-submenu"> <a href="#">Graph type</a>
    <ul class="dropdown-menu">
        <li>
            <input type="checkbox" id="line" name="graph" value="line">
            <label for="line">line</label>
        </li>
        <li>
            <input type="checkbox" id="dot" name="graph" value="dot">
            <label for="dot">dot</label>
        </li>
    </ul>

由于id在页面上必须是唯一的，您肯定应该动态生成它们;另外，您可能还希望在input元素中生成name属性，但这完全取决于您的用例。根据你的想法，我认为你可以像这样生成你的菜单:

<ul id="menu">
    <li class="dropdown-submenu" ng-repeat="facet in facets"> <a href="#">{{facet.name}}</a>
        <ul class="dropdown-menu">
            <li>
                <input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
                <label for="line">line</label>
            </li>
            <li>
                <input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
                <label for="dot">dot</label>
            </li>
        </ul>
    </li>
</ul>

我尝试基于facet.name生成id和name，您可能想要更改它以适应您的需要。

相关文章：