如何将ng-repeat放入ng-repeat中n次
我有一个具有嵌套节点的JSON对象，可以继续使用任意数量的级别。我需要在点击它的父节点时显示节点的内容。看起来像
"node": [
{
"id": "id of the concept model",
"name": "Curcumin",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": [
{
"id": "group11",
"name": "Node 02",
"weight": "70",
"type": "structure",
"node": []
}
]
}
]
},
{
"id": "id of the concept model",
"name": "Abuse Resistent Technology",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Category 01",
"weight": "70",
"type": "text",
"node": []
}
]
},
{
"id": "id of the concept model",
"name": "PC in Aviation",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Industry",
"weight": "70",
"type": "text",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": []
}
]
}
]
}
]
我在两个级别上做过类似的事情：
<div class="conceptModels">
<!--tree starts-->
<ul class="tree">
<span class="treeBlk">
<li ng-repeat="conceptModel in conceptModels.node" >
<span ng-click="levelOne=true" class="textSpan show top">{{conceptModel.name}}<span class="arrclose"></span></span>
<ul ng-show="levelOne">
<li ng-repeat="node1 in conceptModel.node">
<span ng-click="levelTwo=true" class="textSpan">{{node1.name}}<span class="arrclose"></span></span>
<ul ng-show="levelTwo">
<li ng-repeat="node2 in node1.node">
<span class="textSpan">{{node2.name}}<span class="arrclose"></span> </span>
</li>
</ul>
</li>
</ul>
</li>
</span>
</ul>
</div>
有没有办法将此解决方案推广到任意数量的级别？
2 个答案:
答案 0 :(得分：13)
试试这个
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.nodes = [
{
"id": "id of the concept model",
"name": "Curcumin",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": [
{
"id": "group11",
"name": "Node 02",
"weight": "70",
"type": "structure",
"node": []
}
]
}
]
},
{
"id": "id of the concept model",
"name": "Abuse Resistent Technology",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Category 01",
"weight": "70",
"type": "text",
"node": []
}
]
},
{
"id": "id of the concept model",
"name": "PC in Aviation",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Industry",
"weight": "70",
"type": "text",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": []
}
]
}
]
}
];
});li{
list-style: none;
background-color:#334559;
color:#FFF;
padding:2px;
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="treeNodes.html">
<ul>
<li ng-repeat="node in nodes" >
<div ng-click="node.expand = (node.expand?false:true);" ><i class="fa" ng-class="{'fa-caret-right':(node.node.length && !node.expand), 'fa-caret-down':(node.node.length && node.expand)}"></i> {{node.name}}</div>
<div ng-show="node.node.length && node.expand" ng-include=" 'treeNodes.html' " onload="nodes = node.node"></div>
</li>
</ul>
</script>
<div ng-include=" 'treeNodes.html'" style="overflow-y: auto;height: 55%;width: 300px;"></div>
</div>
答案 1 :(得分：1)
其中一个解决方案是创建一个指令来处理任何限制的递归操作。
注意：此解决方案是我为其中一个应用程序创建的角度的通用json打印机+编辑器
JsonApp.directive('renderInput',['$compile','NODE_RELATION_CONFIG',function($compile){
var getTemplate = function(inputKey,inputValue,inputParent,inputConfig,inputDisabled,inputHidden){
var template = '';
var disabled = (inputDisabled || (inputConfig && inputConfig["disabled"])) ? true : false;
var hidden = (inputHidden || (inputConfig && inputConfig["hidden"])) ? true : false;
if(typeof(inputConfig)=="undefined")
inputConfig ={}
for(var key in inputParent)
{
if(typeof(inputConfig[key])=="undefined")
inputConfig[key] = {};
}
if(typeof(inputValue)=="object")
{
//template = '<div ng-hide="'+hidden+'" style="padding-left:7%;border:1px solid #ddd;"><div class="pheading">{[{ inputKey }]}</div><div id="render-123" ng-repeat="(key,value) in inputValue" render-input input-key="{[{ key}]}" input-parent="inputValue" input-value="value" input-config="inputConfig[key]" input-disabled="'+disabled+'" input-hidden="'+hidden+'"></div></div>';
template = '<div ng-hide="'+hidden+'"><div id="render-123" ng-repeat="(key,value) in inputValue" render-input input-key="{[{ key}]}" input-parent="inputValue" input-value="value" input-config="inputConfig[key]" input-disabled="'+disabled+'" input-hidden="'+hidden+'"></div></div>';
}
else
{
var fieldHeading = (inputConfig && inputConfig["mapped_name"]) ? inputConfig["mapped_name"]: inputKey;
if(typeof(inputValue)!="string" || inputValue.length < 200)
{
//small fields use input type text
template = '<div ng-hide="'+hidden+'"><h3 class="gi-orange dy-field-title">'+fieldHeading+'</h3><input class="dy-id-input" type="text" value="{[{ inputValue }]}" ng-disabled="'+disabled+'" /></div>';
}
else
{
template = '<div ng-hide="'+hidden+'"><h3 class="gi-orange dy-field-title">'+fieldHeading+'</h3><textarea class="dy-id-textarea" type="text" ng-disabled="'+disabled+'">{[{ inputValue }]}</textarea></div>';
}
}
return template
}
return{
scope:{
inputKey:"@",
inputValue:"=",
inputParent:"=",
inputConfig:"=",
inputDisabled:"=",
inputHidden: "="
},
link : function(scope, element, attrs) {
element.html(getTemplate(scope.inputKey,scope.inputValue,scope.inputParent,scope.inputConfig,scope.inputDisabled,scope.inputHidden)).show();
$compile(element.contents())(scope);
$(element).on('change','input,textarea',function(e){
if(!scope.$$phase)
scope.inputParent[scope.inputKey]=$(this).val();
if(!scope.$$phase)
scope.$apply();
e.stopImmediatePropagation();
})
},
restrict: 'AE'
}
}]);
示例配置：
{"flight_sector": {"additional_fields": ["at.scdl_pg.content", "at.scdl_pg.meta.keywords", "at.scdl_pg.meta.title", "at.scdl_pg.meta.desc"], "fields_mapped_names": {"at|scdl_pg|meta|desc": "Flight Sector Page : Meta Description", "at|scdl_pg|meta|keywords": "Flight Sector Page : Meta Keywords", "at|score|flier": "Flight Sector Flier Score", "at|scdl_pg|content": "Flight Sector Page : Content Html", "at|scdl_pg|meta|title": "Flight Sector Page : Meta Title", "at|type": "Flight Sector Type"}, "disabled_fields": ["at.score.flier", "at.type"], "hidden_fields": ["at.airlines", "_id", "s", "e", "sn", "en", "st", "t"], "settings": {"en": {"hidden": 1}, "e": {"hidden": 1}, "st": {"hidden": 1}, "s": {"hidden": 1}, "at": {"scdl_pg": {"content": {"mapped_name": "Flight Sector Page : Content Html"}, "meta": {"keywords": {"mapped_name": "Flight Sector Page : Meta Keywords"}, "title": {"mapped_name": "Flight Sector Page : Meta Title"}, "desc": {"mapped_name": "Flight Sector Page : Meta Description"}}}, "score": {"flier": {"disabled": 1, "mapped_name": "Flight Sector Flier Score"}}, "type": {"disabled": 1, "mapped_name": "Flight Sector Type"}, "airlines": {"hidden": 1}}, "t": {"hidden": 1}, "_id": {"hidden": 1}, "sn": {"hidden": 1}}}, "routes_map": {"additional_fields": ["at.rpr_pg.desc"], "fields_mapped_names": {"at|rpr_pg|desc": "Routeplanner Page Write-Up"}, "hidden_fields": ["routes", "t", "s", "e", "sn", "en", "_id"], "settings": {"en": {"hidden": 1}, "e": {"hidden": 1}, "s": {"hidden": 1}, "t": {"hidden": 1}, "routes": {"hidden": 1}, "_id": {"hidden": 1}, "at": {"rpr_pg": {"desc": {"mapped_name": "Routeplanner Page Write-Up"}}}, "sn": {"hidden": 1}}}}
注意： 此示例配置会处理您要添加到现有json +的其他字段，如果您想要隐藏一些字段+将某些字段禁用为输入字段。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？