[英]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,然后單擊級別2顯示級別3
構建樹狀結構時,棘手的部分是指令遞歸。 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;
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.