Общий способ отображения любого TreeView с AngularJS

Question

Общий способ отображения любого TreeView с AngularJS

0

Я работаю над проектом, который частично состоит из отображения дерева документов.

Я недавно столкнулся с проблемой, и я не знаю, как ее решить, поэтому я пришел сюда, чтобы попросить о помощи.

Проблема в том, что у меня есть массив, содержащий все необходимые мне данные. Есть документы в папках и/или папках в папках и т.д. Я знаю, как отображать "детей" в каждой папке, но проблема в том, что я не знаю, как это сделать в целом. Я закодировал простой JSFiddle, чтобы лучше проиллюстрировать проблему: http://jsfiddle.net/k3nj6pco/

Вы можете видеть, что показать детям 1.1 и 1.2 легко. Но я не могу понять, как отображать дочерний элемент 1.1.1 без создания третьего цикла ng-repeat. И я хотел бы обобщить на n глубину.

Кто-нибудь знает, как я могу решить эту проблему? Большое спасибо за уделенное время !

faku 02 авг. 2016, в 14:38

Источник

Теги:

angularjs

treeview

angularjs-ng-repeat

1 ответ

Ещё вопросы

Arno_Geismar · Accepted Answer · 2016-08-02T10-39-00.000Z

Я бы решил это с помощью рекурсивной директивы.

взглянуть на рекурсивные директивы

Суть его в следующем:

<div ng-controller="IndexCtrl">
  <collection collection='locations'></collection>
</div>

app.directive('collection', function () {
  return {
      restrict: "E",
      replace: true,
      scope: {
          collection: '='
      },
      template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
  }
})

а потом:

<member ng-repeat='member in collection' member='member'></member>

app.directive('member', function ($compile) {
  return {
      restrict: "E",
      replace: true,
      scope: {
          member: '='
      },
      template: "<li></li>",
      link: function (scope, element, attrs) {
          if (angular.isArray(scope.member.children)) {
              element.append("<collection collection='member.children'></collection>");
              $compile(element.contents())(scope)
          }
      }
  }
})

поэтому вы компилируете директиву коллекции внутри директивы члена, если есть еще дети.

с уважением

Большое спасибо, сэр, это работает как шарм!