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

I have created a dropdown menu with many checkboxes using bootstrap (see). In this drop-down menu, the possibility of plotting multiple drawings ("measures") on the same chart will be introduced + multiple options (log scale, etc.)

A list of values ​​(according to "measure") stored in a Jason object for now, I am using only one selection (users can plot only 1 chart, any Graph types and options are not):

  & lt; Ng-model = "remedy" ng-option = "facet.name as facet.name for station.facet_groups [0] .for factor in facets" & gt; & Lt; / Select & gt;   
 How can I best handle this fact that there will be only one submenu of each measurement type? 
 Should I Change my HTML? Do I get to  & lt; Input & gt; Dynamically generate value for   id  attributes?  
  & lt ;! - Graph type - & gt; & Lt; Li class = "dropdown-submenu" & gt; & Lt; A href = "#" & gt; Graph type & lt; / A & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" id = "line" name = "graph" value = "line" & gt; & Lt; Label = "line" & gt; Line & lt; / Label & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" id = "dot" name = "graph" value = "dot" & gt; & Lt; Label = "dot" & gt; Dot & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt;    
 
 
 Since a  id  should be unique on one page, You must definitely generate them dynamically; Plus, you want to generate the  name  attribute in the  input  element, but it is completely in the case of your use. Based on Bela, I think you can generate your menu like this:  
  & lt; Ul id = "menu" & gt; & Lt; Li class = "dropdown-submenu" ng-repeat = "factor in aspect" & gt; & Lt; A href = "#" & gt; {{Facet.name}} & lt; / A & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" id = "{{facet.name}} - line" name = "{{facet.name}} - graph" value = "row" & gt; & Lt; Label = "line" & gt; Line & lt; / Label & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "checkbox" id = "{{facet.name}} - dot" name = "{{facet.name}} - article" value = "dot" & gt; & Lt; Label = "dot" & gt; Dot & lt; / Label & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; I try to generate   
  id  and  name  based on  facet.name , you want Change it to change it.