Question

我使用bootstrap创建了一个包含多个复选框的下拉菜单（请参阅http://jsfiddle.net/rxdazn/ryzJb/3/）。此下拉菜单将介绍在同一图表上绘制多个图表（“度量”）+多个选项（对数刻度等）的可能性。

值列表（对应于“度量”）将存储在json对象中。目前，我只使用一个选择（用户只能绘制1个图表，没有图表类型也没有选项）：

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

Answer 1

由于id在页面上必须是唯一的，因此您肯定应该动态生成它们;另外，您可能还想在name元素中生成input属性，但这完全取决于您的用例。基于你的小提琴，我想你可以生成这样的菜单：

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

我尝试根据id生成name和facet.name，您可能希望根据自己的需要进行更改。

如何动态生成带角度的多级下拉菜单？

1 个答案: