развернуть и свернуть Просмотр функциональности в Angularjs

Question

развернуть и свернуть Просмотр функциональности в Angularjs

0

Category 1 (Level 1)
- Subcategory 1 (Level 2)
----Sub-Subcategory 2 (Level 3)
-----Sub-subcategory 3 (Level 3)
Category 2 (Level 1)
- Subcategory 2 (Level 2)
- Subcategory 3 (Level 2)
-----Sub-subcategory 4 (Level 3)
------Subcategory 5 (Level 3)

Для примера 1:

Tangible Assets (Level 1)
-.Vehicles      (Level 2)
----Staff Vehicles (Level 3)
----Cars 
- Computers & Electronics (Level 2)
-----Cash Counting Machine (Level 3)
----Computer & Electronics (Level 3)
----Computer Software      (Level 3)

Покажите уровень записи 1, щелкните на Уровне 2 уровня 2, затем щелкните на Уровне 2, отображающем Уровень 3

Posibabu Elapana 06 июль 2015, в 08:04

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

hansmaad · Answer 1 · 2015-07-06T04-53-00.000Z

Трудная часть при построении дерева, подобного структуре, является директивной рекурсией. Google для "рекурсивной директивы", чтобы найти информацию о проблемах. Решение состоит в том, чтобы добавить и скомпилировать рекурсивные части в link. Я создал простой пример здесь http://plnkr.co/edit/JgQu3r?p=preview

function myMenu() {
    return {
      scope : {
        myMenu : '=myMenu'
      },
      template: '<li ng-repeat="item in myMenu"><my-menu-item></my-menu-item></li>'
    }
}

myMenuItem.$inject = ['$compile'];
function myMenuItem($compile) {
    return {
      template: '<a href ng-bind="item.name" ng-click="show($event)"></a>',
      link: function(scope, element) {
        if (angular.isArray(scope.item.menu)) {
              element.append($compile(
                '<ul ng-if="collapsed" my-menu="item.menu"></ul>')(scope));

        }
        scope.show = function($event) {
          scope.collapsed = !scope.collapsed;
        }
      }
    }
}