简体   繁体   English

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

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

I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). 我使用引导程序制作了一个带有多个复选框的下拉菜单(请参阅http://jsfiddle.net/rxdazn/ryzJb/3/ )。 This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.). 此下拉菜单将引入在同一图表上绘制多个图形(“度量”)和多个选项(对数刻度等)的可能性。

A list of values (corresponding to "measures") will be stored in a json object. 值列表(对应于“度量”)将存储在json对象中。 For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options): 现在,我只使用一个选择(用户只能绘制1个图表,没有图形类型和选项):

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

How can I best handle the fact that each measure type will have the same submenu? 如何最好地处理每个度量类型都具有相同子菜单的事实?
Should I change my HTML? 我应该更改HTML吗? Should I dynamically generate values for <input> id attributes ? 是否应该为<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>

Since an id must be unique on a page, you definitely should dynamically generate them; 由于id在页面上必须唯一,因此您绝对应该动态生成它们; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. 另外,您可能还想在input元素中生成name属性,但这完全取决于您的用例。 Based on you fiddle, I think you can generate your menu like this: 根据您的摆弄,我认为您可以像这样生成菜单:

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

I try to generate the id and name based on facet.name , you may want to change it to suit you needs. 我尝试根据facet.name生成idname ,您可能需要更改它以适合您的需求。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM