扩大和崩溃Angularjs视图功能 [英] expand and collapse View functionality in Angularjs

问题描述

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级点击1级显示二级然后单击2级显示级别3

Show Record Level 1 click the Level 1 display Level 2 then click the Level 2 display Level 3

推荐答案

建立树状结构时，最棘手的部分是指导递归。谷歌递归指令来查找有关问题的一些信息。解决的办法是在链接添加和编译递归部分。我在这里 http://plnkr.co/edit/JgQu3r构建了一个简单的例子吗？ p = preVIEW

The tricky part when building a tree like structure is directive recursion. Google for "recursive directive" to find some info about the problems. The solution is to add and compile the recursive parts in link. I've built a simple example here 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;
        }
      }
    }
}

这篇关于扩大和崩溃Angularjs视图功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！