Erstellen Sie verschachtelte Dropdown-Liste basierend auf Elternauswahl

Ich habe ein Problem beim Erstellen von verschachtelten Dropdown-Steuerelemente auf der Benutzeroberfläche sollte Laufzeit sein. Beispiel-JSON-Daten, die unten bereitgestellt werden. Sollte mehrere Ebenen bis zu 10 sein.Erstellen Sie verschachtelte Dropdown-Liste basierend auf Elternauswahl

Ich habe 2 Ebenen in UI erstellen und konnte nicht verschachtelte Ebenen archivieren.

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

Ausgabe

anzeigen Top-Level-Drop-downs. basierend auf ausgewählten Werten, müssen Dropdowns (verschachtelt) gerendert werden. Ich würde Sie bitten, eine gute Lösung für dieses Problem zu bieten.

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

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

Quelle

2017-03-10 Siva P

Die 'JSON' von Ihnen zur Verfügung gestellten, ist' kein JSON'. –

Ihr JSON-Beispiel ist nicht als richtiger JSON formatiert. Wie bekommen Sie den JSON in die Tabelle? Schreibst du irgendwelche JS zu AJAX die Daten ein? – luc122c

Aktualisiertes JSON-Format. Ich habe die JSON-Daten im Controller fest codiert und zum Filtern von Daten verwendet. –

Schließlich fand ich eine Lösung für das obige Problem und erstellt Arbeits 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'] 
      }]; 
}; 

}]);

Quelle

2017-03-16 23:25:46

Erstellen Sie verschachtelte Dropdown-Liste basierend auf Elternauswahl

Antwort

Verwandte Themen