如何显示AngularJS +引导可折叠树 [英] How do display a collapsible tree in AngularJS + Bootstrap
本文介绍了如何显示AngularJS +引导可折叠树的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我建立一个web应用程序，我需要使用列表中显示的树。我的基本结构是这样的：
*节点1
*节点1.1
* 1.1.1节点
*节点1.1.1.1
* 1.1.2节点
* 1.2节点
我试图找到角或引导的东西，我可以使用这样：
- 在列表的第一个视图，它被展开到第三层。在我的小提琴，我希望看到节点1，节点1.1，节点1.1.1，1.1.2节点和节点1.2（所有，但第4层 - 节点1.1.1.1）
- 在单击列表样式图标（不是节点的文字名称）节点折叠或展开
- 理想情况下，我会爱的图标更改也取决于如果该项目扩大。右箭头如果有更多的下面，如果它已经展开一个向下的箭头，也许常规列表项，如果没有孩子
我很新的AngularJS，仍然很新来引导为好。我看到有角手风琴功能，它似乎并没有很好地处理一切，我需要它。
我喜欢上最好的办法某个方向之前，我code大量的逻辑到我的网络应用程序，处理不同的情况。我想是这样也许有一些现成的，我可以利用这必须是一个常见的问题。任何指导将是非常美联社preciated。
HTML code：
＆LT; DIV NG-应用=对myAppNG控制器=控制器＆GT;
＆LT;我的指导性和GT;＆LT; /我-指令＆GT;
＆LT;表样式=宽度：100％＆GT;＆LT;＆TBODY GT;＆LT; TD＆GT;
＆LT;树项目=树＆GT;＆LT; /树＆GT;
＆LT; / TD＆GT;＆LT; / TBODY＆GT;＆LT; /表＆gt;
＆LT; / DIV＆GT;
角code：
VAR应用= angular.module（'对myApp'，[]）;app.controller（控制器，函数（$范围）{ $ scope.tree = [{名：节点1，项目：[{名：节点1.1，项目：[{名：节点1.1.1，项目：[{名：节点1.1.1.1，项目：[]}]}，{名：节点1.1.2，项目：[]}]}，{名称：节点1.2，项目：[]}]}];}）;
app.directive（'树'，函数（）{
返回{
模板：'＆LT; UL＆GT;＆LT;树节点NG重复=中的项项＆GT;＆LT; /树节点＆GT;＆LT; / UL＆GT;，
限制：'E'，
更换：真实，
范围： {
项目：'=项目'，
}
};
}）;app.directive（treeNode的'，函数（$编译）{
返回{
限制：'E'，
模板：'＆LT;立GT; {{item.name}}＆LT; /李＆GT;，
链接：功能（范围，榆树，ATTRS）{
如果（scope.item.items.length大于0）{
VAR孩子= $编译（'＆LT;树项目=item.items＆GT;＆LT; /树＆GT;'）（范围）;
elm.append（儿童）;
}
}
};
}）;
解决方案
在我后面跟随的例子：
- 引导
- angualr递归
NG-包括或（见第二个示例）的递归指令 - 的jQuery（会尽量避免在未来）
演示1（ NG-包括）<大骨节病> 的 Plunker
从这个模型：
$ scope.displayTree =
[{
名：根，
TYPE_NAME：节点，
秀：真实，
节点：[{
名：松，
GROUP_NAME：节点1
秀：真实，
节点：[{
名：节点1-1
DEVICE_NAME：节点1-1
秀：真实，
节点：[]
}，{
名：节点1-2，
DEVICE_NAME：节点1-2，
秀：真实，
节点：[]
}，{
名：节点-1-3
DEVICE_NAME：节点-1-3
秀：真实，
节点：[]
}]
}，{
名：上帝，
GROUP_NAME：节点2
秀：真实，
节点：[{
名：Vadar
DEVICE_NAME：节点2-1
秀：真实，
节点：[]
}]
}，{
名：博格
GROUP_NAME：节点3
秀：真实，
节点：[]
}，{
名：中带
GROUP_NAME：节点4，
秀：真实，
节点：[]
}]
}];
[{
名：Android的，
TYPE_NAME：Android的，
图标：图标的Android图标-3
秀：真实，
节点：[]
}];
}
第二个例子是基于2指令：
app.directive（'nodeTree'，函数（）{
返回{
模板：'＆LT;节点NG重复=节点树＆GT;＆LT; /节点＆GT;，
更换：真实，
transclude：真实，
限制：'E'，
范围： {
树：'= ngModel
}
};
}）;app.directive（'节点'，函数（$编译）{
返回{
限制：'E'，
更换：真实，
templateUrl：最tree.html'，
链接：功能（范围，榆树，ATTRS）{ // .... 如果（scope.node.children.length大于0）{
VAR childNode = $编译（'＆LT; UL＆GT;＆LT;节点树NG模型=node.children＆GT;＆LT; /节点树＆GT;＆LT; / UL＆GT;'）（范围）
elm.append（childNode）;
}
}
};
}）;
的（增加了一些复选框，以及：））的
演示2 <大骨节病> Plunker
它的外观：
I am building a web app where I need to display a tree using lists. My basic structure looks like this:
* Node 1
* Node 1.1
* Node 1.1.1
* Node 1.1.1.1
* Node 1.1.2
* Node 1.2
I'm trying to find something in angular or bootstrap that I can use such that:
- At first view of the list, it is expanded up to the third layer. In my fiddle, I would want to see Node 1, Node 1.1, Node 1.1.1, Node 1.1.2 and Node 1.2 (all but the 4th layer - Node 1.1.1.1)
- On clicking on the list-style icon (not the word name of the node) The node collapses or expands
- Ideally, I would love for the icon to change also dependent on if the item is expanded. A right arrow if there is more underneath, a down arrow if it is already expanded, and maybe a regular list item if there are no children
I am very new to AngularJS and still quite new to Bootstrap as well. I see that Angular has an accordion function which doesn't seem to quite handle everything I need it to.
I would love some direction on the best approach before I code a lot of logic into my web app that handles the different cases. I think this must be a common problem so perhaps there is something ready made that I can utilize. Any guidance would be much appreciated.
HTML code:
<div ng-app="myApp" ng-controller="controller">
<my-directive></my-directive>
<table style="width: 100%"><tbody><td>
<tree items="tree"></tree>
</td></tbody></table>
</div>
Angular code:
var app = angular.module('myApp', []);
app.controller('controller', function ($scope){
$scope.tree=[{"name":"Node 1","items":[{"name":"Node 1.1","items":[{"name":"Node 1.1.1","items":[{"name":"Node 1.1.1.1","items":[]}]},{"name":"Node 1.1.2","items":[]}]},{"name":"Node 1.2","items":[]}]}];
});
app.directive('tree', function() {
return {
template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
restrict: 'E',
replace: true,
scope: {
items: '=items',
}
};
});
app.directive('treeNode', function($compile) {
return {
restrict: 'E',
template: '<li >{{item.name}}</li>',
link: function(scope, elm, attrs) {
if (scope.item.items.length > 0) {
var children = $compile('<tree items="item.items"></tree>')(scope);
elm.append(children);
}
}
};
});
解决方案
In followed example I used:
- bootstrap
- angualr recursive
ng-includeor (see second example) recursive directives - jQuery (will try to avoid in the future)
Demo 1 (ng-include) Plunker
From this model:
$scope.displayTree =
[{
"name": "Root",
"type_name": "Node",
"show": true,
"nodes": [{
"name": "Loose",
"group_name": "Node-1",
"show": true,
"nodes": [{
"name": "Node-1-1",
"device_name": "Node-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-1-2",
"device_name": "Node-1-2",
"show": true,
"nodes": []
}, {
"name": "Node-1-3",
"device_name": "Node-1-3",
"show": true,
"nodes": []
}]
}, {
"name": "God",
"group_name": "Node-2",
"show": true,
"nodes": [{
"name": "Vadar",
"device_name": "Node-2-1",
"show": true,
"nodes": []
}]
}, {
"name": "Borg",
"group_name": "Node-3",
"show": true,
"nodes": []
}, {
"name": "Fess",
"group_name": "Node-4",
"show": true,
"nodes": []
}]
}];
[{
"name": "Android",
"type_name": "Android",
"icon": "icon-android icon-3",
"show": true,
"nodes": []
}];
}
The 2nd example is based on 2 directives:
app.directive('nodeTree', function() {
return {
template: '<node ng-repeat="node in tree"></node>',
replace: true,
transclude: true,
restrict: 'E',
scope: {
tree: '=ngModel'
}
};
});
app.directive('node', function($compile) {
return {
restrict: 'E',
replace:true,
templateUrl: 'the-tree.html',
link: function(scope, elm, attrs) {
// ....
if (scope.node.children.length > 0) {
var childNode = $compile('<ul ><node-tree ng-model="node.children"></node-tree></ul>')(scope)
elm.append(childNode);
}
}
};
});
(Added some checkboxes as well :))
Demo 2 Plunker
How it looks:
这篇关于如何显示AngularJS +引导可折叠树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
