如何创建动态树结构左菜单angularjs
我需要使用json response中的角度js在我的Web应用程序中创建动态树结构左侧菜单。我在ng-repeat的帮助下实现了这个目标，限制了3个级别 - 级别1 - ＆gt;家长（类别），2级 - ＆gt;子（子类别），等级3 - ＆gt;孩子的孩子（子类别）。现在，我想'不'不。没有限制的水平。可以选择将类别创建为父级，并可以在该父级下创建子类别。就像谷歌驱动器一样。
任何人都可以指导我完成此任务。
以下是json的回复。
{
"categories": [
{
"updatedAt": "2017-10-11T13:00:05.422Z",
"category": "Technical Department",
"count": 0,
"_id": "59de15d5305f34741de250a1",
"createdAt": "2017-10-11T13:00:05.422Z",
"subcategories": [
{
"updatedAt": "2017-10-11T13:01:02.247Z",
"category": "Management Team",
"count": 0,
"_id": "59de160e305f34741de250a5",
"createdAt": "2017-10-11T13:01:02.247Z",
"parent": "59de15d5305f34741de250a1",
"subcategories": [
{
"updatedAt": "2017-10-11T13:03:32.781Z",
"category": "Team 02",
"count": 0,
"_id": "59de16a4305f34741de250a7",
"createdAt": "2017-10-11T13:03:32.781Z",
"parent": "59de160e305f34741de250a5"
},
{
"updatedAt": "2017-10-11T13:03:22.491Z",
"category": "Team 01",
"count": 0,
"_id": "59de169a305f34741de250a6",
"createdAt": "2017-10-11T13:03:22.491Z",
"parent": "59de160e305f34741de250a5"
}
]
},
{
"updatedAt": "2017-10-11T13:00:45.896Z",
"category": "iOS Team",
"count": 0,
"_id": "59de15fd305f34741de250a4",
"createdAt": "2017-10-11T13:00:45.896Z",
"parent": "59de15d5305f34741de250a1",
"subcategories": [
{
"updatedAt": "2017-10-11T13:11:50.399Z",
"category": "Team 01",
"count": 0,
"_id": "59de1896305f34741de250b2",
"createdAt": "2017-10-11T13:11:50.399Z",
"parent": "59de15fd305f34741de250a4"
},
{
"updatedAt": "2017-10-11T13:11:38.820Z",
"category": "Team 02",
"count": 0,
"_id": "59de188a305f34741de250b1",
"createdAt": "2017-10-11T13:11:38.820Z",
"parent": "59de15fd305f34741de250a4"
}
]
},
{
"updatedAt": "2017-10-11T13:00:27.343Z",
"category": "Android Team",
"count": 0,
"_id": "59de15eb305f34741de250a3",
"createdAt": "2017-10-11T13:00:27.343Z",
"parent": "59de15d5305f34741de250a1"
},
{
"updatedAt": "2017-10-11T13:00:17.443Z",
"category": "Java Team",
"count": 0,
"_id": "59de15e1305f34741de250a2",
"createdAt": "2017-10-11T13:00:17.443Z",
"parent": "59de15d5305f34741de250a1"
}
]
}
]
}
以下是HTML
<span ng-repeat="category in docCategories" class="subpage" style="padding-left:0;">
<a href="javascript://void(0)" ng-click="showsub1fn($index,category.category,category._id);libraryFilter(category._id,$index);" class="filsecnbdyseta3" ng-class="{clrGry : chekindex == $index}">
<i class="fa fa-folder" aria-hidden="true" ng-if="showsub1 != $index"></i>
<i class="fa fa-folder-open " aria-hidden="true" style="color:#666b6e;" ng-if="showsub1 == $index" ng-class="{clrGry : chekindex == $index}"></i>
{{category.category}} <span ng-if="category.count > 0">({{category.count}})</span></a>
<span ng-repeat="cat1 in category.subcategories" class="subpage" ng-show="showsub1 == $parent.$index">
<a class="addnewDynCls" href="javascript://void(0)" ng-click="showsub2fn($index,$parent.$index,cat1.category,cat1._id);libraryFilter(cat1._id,$index);" class="filsecnbdyseta3" ng-class="{clrGry : chekindexsub1 == $index}">
<i class="fa fa-folder fafoopenot" aria-hidden="true" id="fold{{$parent.$index}}f{{$index}}"></i>
<i class="fa fa-folder-open fafoopen" aria-hidden="true" id="foldopen{{$parent.$index}}f{{$index}}" style="display:none;"></i>
{{cat1.category}} <span ng-if="cat1.count > 0">({{cat1.count}})</span></a>
<span class="subsubpagePrnt" id="showsub2{{$parent.$index}}f{{$index}}" style="display:none;">
<span ng-repeat="cat2 in cat1.subcategories" class="subpage subsubpage" >
<a class="addnewDynClsSub" href="javascript://void(0)" ng-click="showsub3fn($index,$parent.$index,$parent.$parent.$index,cat2.category,cat2._id);libraryFilter(cat2._id,$index);" class="filsecnbdyseta3" ng-class="{clrGry : chekindexsub2 == $index}" >
<i class="fa fa-folder fafoopenotsub" aria-hidden="true" id="fold{{$parent.$parent.$index}}f{{$parent.$index}}f{{$index}}"></i>
<i class="fa fa-folder-open fafoopensub" aria-hidden="true" style="color:#59b0dd;" id="foldopen{{$parent.$parent.$index}}f{{$parent.$index}}f{{$index}}" style="display:none;"></i>
{{cat2.category}} <span ng-if="cat2.count > 0">({{cat2.count}})</span></a>
<span id="showsub3{{$parent.$parent.$index}}f{{$parent.$index}}f{{$index}}"></span>
<!-- <span ng-repeat="cat3 in cat2.subcategories" class="subpage">
<a href="javascript://void(0)" !ng-click="libraryFilter(category.category,$index)" class="filsecnbdyseta3" !ng-class="{clrBlk : chekindex == $index}">-{{cat3.category}}</a>
</span> -->
</span>
</span>
</span>
</span>
</span>
JS用于在菜单中显示/隐藏文件夹
$scope.showsub1fn = function(ind,categoryName,categoryId){
$scope.addCatBtn = false;
$scope.categoryLevel = 1;
$scope.levelOneIndex = ind;
if($scope.showsub1 == ind){
$scope.showsub1 = -1;
}else{
$scope.showsub1 = ind;
}
$scope.chekindex = ind;
$scope.chekindexsub1 = -1;
$scope.chekindexsub2 = -1;
$scope.categoryId = categoryId;
$(".addnewDynCls").removeClass("clrGry");
$(".addnewDynClsSub").removeClass("clrGry");
$(".fafoopenot").removeClass("clrGry");
$(".fafoopen").removeClass("clrGry");
$('.subsubpage').hide();
$(".fafoopenotsub").show();
$(".fafoopensub").hide();
$(".fafoopenot").show();
$(".fafoopen").hide();
$('.dpdwnLib1').show();
}
$scope.showsub2fn = function(ind,parInd,categoryName1,categoryId1){
$scope.addCatBtn = false;
if($("#foldopen"+parInd+"f"+ind).css("display") == "inline"){
$(".fafoopenot").show();
$(".fafoopen").hide();
$("#foldopen"+parInd+"f"+ind).show();
$("#fold"+parInd+"f"+ind).hide();
$(".subsubpagePrnt").hide();
$("#showsub2"+parInd+"f"+ind).show();
}else{
$(".fafoopenot").show();
$(".fafoopen").hide();
$("#foldopen"+parInd+"f"+ind).hide();
$("#fold"+parInd+"f"+ind).show();
$(".subsubpagePrnt").hide();
$("#showsub2"+parInd+"f"+ind).hide();
}
$scope.categoryLevel = 2;
$scope.levelOneIndex = parInd;
$scope.levelTwoIndex = ind;
$('.subsubpage').show();
$("#showsub2"+parInd+"f"+ind).toggle();
$("#fold"+parInd+"f"+ind).toggle();
$(".fafoopenot").removeClass("clrGry");
$(".fafoopen").removeClass("clrGry");
$("#fold"+parInd+"f"+ind).addClass("clrGry");
$("#foldopen"+parInd+"f"+ind).toggle();
$("#foldopen"+parInd+"f"+ind).addClass("clrGry");
$(".addnewDynCls").removeClass("clrGry");
$("#showsub2"+parInd+"f"+ind).siblings(".addnewDynCls").addClass("clrGry");
$(".addnewDynClsSub").removeClass("clrGry");
$scope.chekindex = parInd;
$scope.chekindexsub1 = ind;
$(".fafoopenotsub").removeClass("clrGry");
$(".fafoopensub").removeClass("clrGry");
$(".fafoopenotsub").show();
$(".fafoopensub").hide();
$('.dpdwnLib1').hide();
$('.dpdwnLib2').show();
}
$scope.showsub3fn = function(ind,parInd,parparInd,categoryName2,categoryId2){
$scope.addCatBtn = true;
$scope.categoryLevel = 3;
$scope.levelOneIndex = parparInd;
$scope.levelTwoIndex = parInd;
$scope.levelThreeIndex = ind;
if($("#foldopen"+parparInd+"f"+parInd+"f"+ind).css("display") == "inline"){
$(".fafoopenotsub").show();
$(".fafoopensub").hide();
$("#foldopen"+parparInd+"f"+parInd+"f"+ind).show();
$("#fold"+parparInd+"f"+parInd+"f"+ind).hide();
}else{
$(".fafoopenotsub").show();
$(".fafoopensub").hide();
$("#foldopen"+parparInd+"f"+parInd+"f"+ind).hide();
$("#fold"+parparInd+"f"+parInd+"f"+ind).show();
}
$(".addnewDynClsSub").removeClass("clrGry");
$(".fafoopenotsub").removeClass("clrGry");
$(".fafoopensub").removeClass("clrGry");
$("#showsub3"+parparInd+"f"+parInd+"f"+ind).siblings(".addnewDynClsSub").addClass("clrGry");
$("#fold"+parparInd+"f"+parInd+"f"+ind).toggle();
$("#fold"+parparInd+"f"+parInd+"f"+ind).addClass("clrGry");
$("#foldopen"+parparInd+"f"+parInd+"f"+ind).toggle();
$("#foldopen"+parparInd+"f"+parInd+"f"+ind).addClass("clrGry");
$('.dpdwnLib1').hide();
$('.dpdwnLib2').hide();
$('.dpdwnLib3').show();
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？