древовидный вид из json in ui-select

Question

Ищете отображение вложенного json в структуре древовидной структуры в ui-select.
я могу создать дерево, используя угловую директиву:

Код

data:   
$scope.treeFamily = { 
      name : "Parent", 
      children: [{ 
       name : "Child1", 
       children: [{ 
        name : "Grandchild1", 
        children: [] 
       },{ 
        name : "Grandchild2", 
        children: [] 
       },{ 
        name : "Grandchild3", 
        children: [] 
       }] 
      }, { 
       name: "Child2", 
       children: [] 
      }] 
     }; 


directive: 
     module.directive("tree", function($compile) { 
      return { 
       restrict: "E", 
       transclude: true, 
       scope: {family: '='}, 
       template:  
        '<ul>' + 
         '<li ng-transclude></li>' + 
         '<p>{{ family.name }}</p>' + 
         '<li ng-repeat="child in family.children">' + 
          '<tree family="child"></tree>' + 
         '</li>' + 
        '</ul>', 
       compile: function(tElement, tAttr, transclude) { 
        var contents = tElement.contents().remove(); 
        var compiledContents; 
        return function(scope, iElement, iAttr) { 
         if(!compiledContents) { 
          compiledContents = $compile(contents, transclude); 
         } 
         compiledContents(scope, function(clone, scope) { 
           iElement.append(clone); 
         }); 
        }; 
       } 
      }; 
     }); 

html: 
     <tree family="treeFamily"> 

     </tree> 

Я хотел бы иметь возможность поиска/выбора каждого узла в UI-выберите. Ищите предложения.

Answer 1

К сожалению, в директиве ui-select действительно нет никакого способа сделать вашу директиву, поскольку она обрабатывает все его варианты с использованием повторений и не дает вам возможности переопределить это без по существу переписывания поле выбора ui. Однако вы можете создавать шаблонные элементы отображения. начать уплощение ваши данные в массив:

[{name: 'Parent', treelevel: 0}, 
    {name: 'Child', treelevel: 1}, 
    {name: 'Grandchild', treelevel: 2}] 

затем оттуда, написать UI-выбрать следующим образом:

<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> 
    <div style="padding-left: {{15 * person.treelevel}}px" ng-bind-html="person.name | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 

, который будет отображать все в дереве, как формат. следующая рабочая зона имеет рабочую версию: http://plnkr.co/edit/Rzlu6zIHOYzVlhQebh7V?p=preview