如何动态生成带角度的多级下拉菜单? [英] How can I dynamically generate a multi-level dropdown menu with angular?
问题描述
我使用引导程序制作了一个带有多个复选框的下拉菜单(参见 http://jsfiddle.net/rxdazn/ryzJb/3/).此下拉菜单将介绍在同一图表 + 多个选项(对数刻度等)上绘制多个图形(度量")的可能性.
I have made a dropdown menu with multiple checkboxes using bootstrap (see 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.).
值列表(对应于度量")将存储在 json 对象中.目前,我只使用一个选择(用户只能绘制 1 个图表,没有图表类型或选项):
A list of values (corresponding to "measures") will be stored in a json object. For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
我怎样才能最好地处理每个度量类型都具有相同子菜单的事实?
我应该更改我的 HTML 吗?我应该为
id
属性动态生成值吗?
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input>
id
attributes ?
<!-- 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
属性,但这完全取决于您的用例.根据您的小提琴,我认为您可以像这样生成菜单:
Since an id
must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name
attribute in input
element, but this is totally up to your use case. 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>
我尝试根据 facet.name
生成 id
和 name
,您可能需要更改它以满足您的需要.
I try to generate the id
and name
based on facet.name
, you may want to change it to suit you needs.
这篇关于如何动态生成带角度的多级下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!