Question

我在UI上创建嵌套下拉控件时遇到问题应该是运行时。下面提供的示例JSON数据。应该是多达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"]
}];

我在UI中创建了2个级别，但我无法归档嵌套级别。

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

输出

显示顶级下拉菜单。根据选定的值，需要渲染下拉（嵌套）。我会请你为这个问题提供很好的解决方案。

Device |
       |---> OS
           |---> Browser
               |---> Domain
                   |---> Content

创建了plunker以供参考：http://plnkr.co/edit/6I3o3tYqYQaQPlhyiC57?p=preview

Answer 1

最后，我找到了上述问题的解决方案并创建了工作plnkr。

http://plnkr.co/edit/6I3o3tYqYQaQPlhyiC57?p=preview

<body ng-app="app" ng-controller="Ctrl">
     <fieldset>
        <legend>Filters</legend>
        <div class="filtercontainer">
            <div ng-repeat="ele in datasource | filter: filter">
                <div class="row rowspace">
                    <label>{{ele.name}}</label>
                </div>
                <div class="row rowspace">
                    <div class="col-md-12 divspace">
                        <select ng-change='onCategoryChange(ele)' id="$index" 
                        ng-model="selectedName" ng-options="x for x in ele.content"></select>
                    </div>
                </div>
                <div class="row" ng-include="'tree.html'"></div>
            </div>
        </div>
    </fieldset>
   <script type="text/ng-template" id="tree.html">
       <div class="row" ng-repeat="ele in ele.nodes" style="padding-left: 15px;">
          <div class="row rowspace">
              <label>{{ele.name}}</label>
          </div>
          <div class="row rowspace">
              <div class="col-md-12 divspace">
                  <select id="$index" ng-change='onCategoryChange(ele)'
                  ng-model="selectedName" ng-options="x for x in ele.content"></select>
              </div>
          </div>
          <div class="row" ng-include="'tree.html'"></div>
      </div>
  </script>
  </body>

var app = angular.module('app',[]);

app.controller('Ctrl', ['$scope','$filter', function($scope, $filter){

  $scope.datasource =  [{
    "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"]
}];

$scope.filter = function(apps) {
   return apps.category.length === 0;
};

$scope.onCategoryChange = function(ele){
  debugger;
  ele.nodes = [{
                name: 'OS Type',
                category: 'Dektop',
                content: ['None Set','Microsoft Windows', 'Linux']
            }, {
                name: 'Browser Type',
                category: 'Dektop',
                content: ['None Set', 'Microsoft', 'Google', 'Mozilla']
            },{
                name: 'Authentication Status',
                category: 'Dektop',
                content: ['None Set', 'Logged in', 'Logged Out']
            }];
};

}]);

根据父选择创建嵌套下拉列表

1 个答案: