如何创建动态树结构左菜单angularjs
问题描述 投票：0回答：1
我需要使用来自json响应的Angular js在我的Web应用程序中创建动态树结构左侧菜单。我在ng-repeat的帮助下实现了3个级别的限制-级别1->父级（类别），级别2->子级（子类别），级别3->子级的子级（子类别）。现在，我不想。没有限制的水平。有一个选项可以将类别创建为父类别，并且可以在该父类别下创建子类别。就像谷歌驱动器。
任何人都可以引导我完成此任务。
以下是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();
}
1个回答
0
投票
投票
这是我找到的创建动态类别的最佳解决方案
最新问题
- 有什么方法可以通过reactjs点击按钮将Antd表数据导出到Excel表中
- 训练 IP-Adapter plus 模型后出现推理错误
- 从字典中的键返回值的函数 - python
- 如何更改 Azure 应用服务以显示不同的时区？
- Next.js 应用程序的 Firebase 应用程序托管和云功能部署中的依赖关系问题
- 将二维数组的行按两列分组，并覆盖每组中无值的关联元素
- 如何正确访问地图值？
- Android 模拟器无法信任 Charles 代理证书
- 使用空手道1.5时不会生成Karate.log文件
- 简单矩阵乘法 - 替换长度错误[关闭]
- 为什么空手道场景和场景大纲在名称前生成括号？
- 按日期列对二维数组的行进行分组，并覆盖每组中无值的关联元素
- SFSpeechRecognizer 的冗余问题
- 信号值改变后调用函数
- flutter中sqflite的OnUpgrade并在没有该值时设置默认值
- 如何在拖动过程中使视图保持在用户手指的中心
- 旧的和奇异的 JVM 上 java.io.BufferedInputStream 的默认缓冲区大小是多少？
- C# 字符串前的“@”[重复]
- 在 MYSQL 中继续获取表和视图
- 尝试从 C 调用 ruby 方法时如何在 C 代码中“要求”第三方模块？
© www.soinside.com 2019 - 2024. All rights reserved.