引导可折叠树

引导可折叠树

关注
发信
关注(28)粉丝(399)

如何显示AngularJS +引导可折叠树

本文介绍了如何显示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; D​​IV 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-包括） 的

从这个模型：

  $ 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的，
            图标：图标的Andr​​oid图标-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

它的外观：

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

http://jsfiddle.net/QffFm/1/

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-include or (see second example) recursive directives
  • jQuery (will try to avoid in the future)

Demo 1 (ng-include)

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

How it looks:

这篇关于如何显示AngularJS +引导可折叠树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 04:21
Powered by LMLPHP ©2024 引导可折叠树 0.055595