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

【问题标题】：Create nested drop down list based on parent selection根据父选择创建嵌套下拉列表
【发布时间】：2017-03-17 07:25:46
【问题描述】：

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

【问题讨论】：

您提供的JSON，是not a JSON。
您的 JSON 示例未格式化为正确的 JSON。另外，您如何将 JSON 放入表中？你写过什么JS来AJAX里面的数据吗？
刚刚更新了 JSON 格式。我在控制器中硬编码 JSON 数据并用于过滤数据。
所以你的结构中有一个“品牌”这个词，但我在你的代码中找不到它。请提供正确的json结构及对应图。
更新了实际的 JSON 数据。如果有任何解决方案，请提供给我。

标签： javascript angularjs html angularjs-ng-repeat

【解决方案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']
            }];
};

}]);

【讨论】：