本文介绍了扩大和崩溃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
推荐答案
建立树状结构时,最棘手的部分是指导递归。谷歌递归指令来查找有关问题的一些信息。解决的办法是在链接
添加和编译递归部分。我在这里
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视图功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!