I have an issue for creating nested drop down controls at UI should be run
time. Sample JSON data provided below. should be multiple levels up to 10.
JSON [{
"name" : "Device",
"category" : "",
"content" : ["Desktop", "Mobile"]},{
"name" : "OS",
"category" : "Desktop",
"content" : ["Windows","Linux", "Unix"]},{
"name" : "Browser",
"category" : "OS",
"content" : ["I.E","Chrome","Safari"]},{
"name" : "Domain",
"category" : "Browser",
"content" : ["google.com","yahoo.com"]},{
"name" : "Content",
"category" : "Domain",
"content" : ["News","Video","Photo"]}];
I have create 2 levels in UI and I was unable to archived nested levels.
<fieldset>
<legend>Filters</legend>
<div class="filtercontainer">
<div ng-repeat="ele in filters">
<div class="row rowspace">
<label>{{ele.name}}</label>
</div>
<div class="row rowspace">
<div class="col-md-12 divspace">
<select id="{{$index}}" kendo-drop-down-list
k-data-source="{{ele.content}}" k-change="filterChange"></select>
</div>
</div>
<div class="row" ng-repeat="childs in ele.childs | groupBy:3">
<div class="col-xs-4" ng-repeat="citem in childs" >
<div class="row rowspace">
<label>{{citem.name}}</label>
</div>
<div class="row rowspace">
<div class="col-md-12 divspace">
<select id="{{$index}}" class="ddlchild"
kendo-drop-down-list k-data-source="{{citem.content}}"
k-change="filterChange"></select>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
fieldset {
border: 1px solid lightgrey;
padding: 20px;
border-radius: 8px;
padding: 5px;
vertical-align: top;
font-size: 11px;
}
legend {
text-align: left !important;
width: auto;
margin: 0px !important;
border-bottom: none;
font-size: 15px;
}
.filtercontainer {
overflow-x: hidden;
overflow-y: scroll;
max-height: 250px;
}
.ddlchild {
width: 100% !important;
-moz-min-width: 100px;
-ms-min-width: 100px;
-o-min-width: 100px;
-webkit-min-width: 100px;
min-width: 100px;
}
I have an issue for creating nested drop down controls at UI should be run
time. Sample JSON data provided below. should be multiple levels up to 10.
JSON [{
"name" : "Device",
"category" : "",
"content" : ["Desktop", "Mobile"]},{
"name" : "OS",
"category" : "Desktop",
"content" : ["Windows","Linux", "Unix"]},{
"name" : "Browser",
"category" : "OS",
"content" : ["I.E","Chrome","Safari"]},{
"name" : "Domain",
"category" : "Browser",
"content" : ["google.com","yahoo.com"]},{
"name" : "Content",
"category" : "Domain",
"content" : ["News","Video","Photo"]}];
I have create 2 levels in UI and I was unable to archived nested levels.
<fieldset>
<legend>Filters</legend>
<div class="filtercontainer">
<div ng-repeat="ele in filters">
<div class="row rowspace">
<label>{{ele.name}}</label>
</div>
<div class="row rowspace">
<div class="col-md-12 divspace">
<select id="{{$index}}" kendo-drop-down-list
k-data-source="{{ele.content}}" k-change="filterChange"></select>
</div>
</div>
<div class="row" ng-repeat="childs in ele.childs | groupBy:3">
<div class="col-xs-4" ng-repeat="citem in childs" >
<div class="row rowspace">
<label>{{citem.name}}</label>
</div>
<div class="row rowspace">
<div class="col-md-12 divspace">
<select id="{{$index}}" class="ddlchild"
kendo-drop-down-list k-data-source="{{citem.content}}"
k-change="filterChange"></select>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
fieldset {
border: 1px solid lightgrey;
padding: 20px;
border-radius: 8px;
padding: 5px;
vertical-align: top;
font-size: 11px;
}
legend {
text-align: left !important;
width: auto;
margin: 0px !important;
border-bottom: none;
font-size: 15px;
}
.filtercontainer {
overflow-x: hidden;
overflow-y: scroll;
max-height: 250px;
}
.ddlchild {
width: 100% !important;
-moz-min-width: 100px;
-ms-min-width: 100px;
-o-min-width: 100px;
-webkit-min-width: 100px;
min-width: 100px;
}
*Output* show top level drop downs. based on selected values, need to
render drop downs(nested). I would request you to provide good solution for
this problem.
Device |
|---> OS
|---> Browser
|---> Domain
|---> Content
Created plunker for reference:
http://plnkr.co/edit/6I3o3tYqYQaQPlhyiC57?p=preview
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
