Is it possible to make a Tree View with Angular

Question

I m looking to display data in a tree structure in a web app  I was hoping to use Angular for this task   Looks like ng-repeat will allow me to iterate through a list of nodes  but how can I then do nesting when a given node s depth increases   I tried the following code  but the auto-escaping of the HTML is preventing this from working  Plus  the end ul tag is in the wrong place   I m pretty sure that I m going about this problem entirely the wrong way   Any ideas

User · Accepted Answer

Have a look at this fiddle  Original   http   jsfiddle net brendanowen uXbn6 8   Updated  http   jsfiddle net animaxf uXbn6 4779   This should give you a good idea of how to display a tree like structure using angular  It is kind of using recursion in html

User · Answer

You can try with Angular-Tree-DnD sample with Angular-Ui-Tree  but i edited  compatibility with table  grid  list    Able Drag  amp  Drop Extended function directive for list  next  prev  getChildren      Filter data  OrderBy  ver

User · Answer

You can use angular-recursion-injector for that  https   github com knyga angular-recursion-injector  Allows you to do unlimited depth nesting with conditioning  Does recompilation only if needed and compiles only right elements  No magic in code    lt div class  node  gt     lt span gt   name   lt  span gt      lt node--recursion recursion-if  subNode  ng-model  subNode  gt  lt  node--recursion gt   lt  div gt    One of the things that allows it to work faster and simpler then the other solutions is  --recursion  suffix

User · Answer

When the tree structure is large  Angular  up to 1 4 x  becomes very slow at rendering a recursive template   After trying a number of these suggestions  I ended up creating a simple HTML string and using ng-bind-html to display it   Of course  this is not the way to use Angular features  A bare-bones recursive function is shown here  with minimal HTML    function menu tree menu  prefix        var html     lt div gt     prefix   menu menu name     -     menu menu desc     lt  div gt  n       if   menu items  return html      prefix    menu menu name            for  var i 0  i lt menu items length    i            var item   menu items i           html    menu tree item  prefix             return html       Generate the tree view and tell Angular to trust this HTML  scope html menu    sce trustAsHtml menu tree menu          In the template  it only needs this one line    lt div ng-bind-html  html menu  gt  lt  div gt    This bypasses all of Angular s data binding and simply displays the HTML in a fraction of the time of the recursive template methods   With a menu structure like this  a partial file tree of a Linux file system    menu    menu name      menu desc   root   items                 menu name   bin   menu desc   Essential command binaries   items                     menu name   arch   menu desc   print machine architecture                     menu name   bash   menu desc   GNU Bourne-Again SHell                     menu name   cat   menu desc   concatenate and print files                     menu name   date   menu desc   display or set date and time                     menu name         menu desc   other files                                menu name   boot   menu desc   Static files of the boot loader                 menu name   dev   menu desc   Device files                 menu name   etc   menu desc   Host-specific system configuration                 menu name   lib   menu desc   Essential shared libraries and kernel modules                 menu name   media   menu desc   Mount point for removable media                 menu name   mnt   menu desc   Mount point for mounting a filesystem temporarily                 menu name   opt   menu desc   Add-on application software packages                 menu name   sbin   menu desc   Essential system binaries                 menu name   srv   menu desc   Data for services provided by this system                 menu name   tmp   menu desc   Temporary files                 menu name   usr   menu desc   Secondary hierarchy   items                     menu name   bin   menu desc   user utilities and applications                     menu name   include   menu desc                        menu name   local   menu desc      items                         menu name   bin   menu desc   local user binaries                         menu name   games   menu desc   local user games                                        menu name   sbin   menu desc                        menu name   share   menu desc                        menu name         menu desc   other files                                menu name   var   menu desc   Variable data                        The output becomes   - root  bin - Essential command binaries  bin arch - print machine architecture  bin bash - GNU Bourne-Again SHell  bin cat - concatenate and print files  bin date - display or set date and time  bin     - other files  boot - Static files of the boot loader  dev - Device files  etc - Host-specific system configuration  lib - Essential shared libraries and kernel modules  media - Mount point for removable media  mnt - Mount point for mounting a filesystem temporarily  opt - Add-on application software packages  sbin - Essential system binaries  srv - Data for services provided by this system  tmp - Temporary files  usr - Secondary hierarchy  usr bin - user utilities and applications  usr include -  usr local -  usr local bin - local user binaries  usr local games - local user games  usr sbin -  usr share -  usr     - other files  var - Variable data

User · Answer

Based on  ganaraj  s answer  and  dnc253  s answer  I just made a simple  directive  for the tree structure having selecting  adding  deleting  and editing feature   Jsfiddle  http   jsfiddle net yoshiokatsuneo 9dzsms7y   HTML    lt script type  text ng-template  id  tree item renderer html  gt       lt div class  node   ng-class   selected  data selected   ng-click  select data   gt           lt span ng-click  data hide  data hide  style  display inline-block  width 10px   gt               lt span ng-show  data hide  amp  amp  data nodes length  gt  0  class  fa fa-caret-right  gt   lt  span gt               lt span ng-show   data hide  amp  amp  data nodes length  gt  0  class  fa fa-caret-down  gt - lt  span gt           lt  span gt           lt span ng-show   data editting  ng-dblclick  edit  event    gt   data name   lt  span gt           lt span ng-show  data editting  gt  lt input ng-model  data name  ng-blur  unedit    ng-focus  f    gt  lt  input gt  lt  span gt           lt button ng-click  add data   gt Add node lt  button gt           lt button ng-click  delete data   ng-show  data parent  gt Delete node lt  button gt       lt  div gt       lt ul ng-show   data hide  style  list-style-type  none  padding-left  15px  gt           lt li ng-repeat  data in data nodes  gt               lt recursive gt  lt sub-tree data  data  gt  lt  sub-tree gt  lt  recursive gt           lt  li gt       lt  ul gt   lt  script gt   lt ul ng-app  Application  style  list-style-type  none  padding-left  0  gt       lt tree data   name   Node   nodes     show true   gt  lt  tree gt   lt  ul gt    JavaScript   angular module  myApp           https   stackoverflow com a 14657310 1309218    angular module  myApp    directive  recursive   function  compile        return           restrict   EACM           require    tree           priority  100000           compile  function tElement  tAttr                var contents   tElement contents   remove                var compiledContents              return function scope  iElement  iAttr                    if  compiledContents                        compiledContents    compile contents                                     compiledContents scope                                        function clone                             iElement append clone                                                                                     angular module  myApp    directive  subTree   function  timeout        return           restrict   EA           require    tree           templateUrl   tree item renderer html           scope                data                          link  function scope  element  attrs  treeCtrl                scope select   function                    treeCtrl select scope data                              scope delete   function                     scope data parent nodes splice scope data parent nodes indexOf scope data   1                              scope add   function                     var post   scope data nodes length   1                  var newName   scope data name    -    post                  scope data nodes push  name  newName nodes     show true  parent  scope data                               scope edit   function event                   scope data editting   true                   timeout function   event target parentNode querySelector  input   focus                                  scope unedit   function                    scope data editting   false                                         angular module  myApp    directive  tree   function        return           restrict   EA           template    lt sub-tree data  data  root  data  gt  lt  sub-tree gt            controller  function  scope               this select   function data                   if  scope selected                        scope selected selected   false                                    data selected   true                   scope selected   data                                    scope                data

User · Answer

Yes it definitely possible  The question here probably assumes Angular 1 x  but for future reference I am including an Angular 2 example   Conceptually all you have to do is create a recursive template    lt ul gt       lt li  for   dir of directories  gt            lt span gt  lt input type  checkbox   checked   dir checked   click   dir check         gt  lt  span gt            lt span  click   dir toggle    gt    dir name    lt  span gt            lt div  if  dir expanded  gt               lt ul  for   file of dir files  gt                    file                lt  ul gt               lt tree-view  directories   dir directories  gt  lt  tree-view gt           lt  div gt       lt  li gt   lt  ul gt    You then bind a tree object to the template and let Angular work its magic  This concept is obviously applicable to Angular 1 x as well   Here is a complete example  http   www syntaxsuccess com viewarticle recursive-treeview-in-angular-2 0

User · Answer

So many great solutions  but I feel they all in one way or another over-complicate things a bit   I wanted to create something that recreated the simplicity of  Mark Lagendijk s awnser  but without it defining a template in the directive  but rather would let the  user  create the template in HTML     With ideas taken from https   github com stackfull angular-tree-repeat etc    I ended up with creating the project  https   github com dotJEM angular-tree  Which allows you to build your tree like    lt ul dx-start-with  rootNode  gt     lt li ng-repeat  node in  dxPrior nodes  gt         node name         lt ul dx-connect  node   gt     lt  li gt   lt  ul gt    Which to me is cleaner than having to create multiple directives for differently structured trees     In essence calling the above a tree is a bit false  it picks much more off from  ganaraj s awnser of  recursive templates   but allows us to define the template where we need the tree    you could do that with a script tag based template  but it still has to sit right outside the actual tree node  and it still just feels a bit yuk      Left here for just another choice

User · Answer

Another example based off the original source  with a sample tree structure already in place  easier to see how it works IMO  and a filter to search the tree   JSFiddle

User · Answer

If you are using Bootstrap CSS     I have created a simple re-usable tree control  directive  for AngularJS based on a Bootstrap  nav  list   I added extra indentation  icons  and animation   HTML attributes are used for configuration   It does not use recursion   I called it angular-bootstrap-nav-tree   catchy name  don t you think     There is an example here  and the source is here

User · Answer

This one seems a bit more complete  https   github com dump247 angular tree

User · Answer

Not complicated    lt div ng-app  Application  ng-controller  TreeController  gt       lt table gt           lt thead gt               lt tr gt                   lt th gt col 1 lt  th gt                   lt th gt col 2 lt  th gt                   lt th gt col 3 lt  th gt               lt  tr gt           lt  thead gt           lt tbody ng-repeat  item in tree  gt               lt tr gt                   lt td gt   item id   lt  td gt                   lt td gt   item fname   lt  td gt                   lt td gt   item lname   lt  td gt               lt  tr gt               lt tr ng-repeat  children in item child  gt                   lt td style  padding-left 15px   gt   children id   lt  td gt                   lt td gt   children fname   lt  td gt               lt  tr gt           lt  tbody gt        lt  table gt   lt  div gt    controller code   angular module  myApp        controller  TreeController      scope   function   scope         scope tree              id  1          fname   tree           child                 id  1              fname   example                      lname   grid

User · Answer

Here is an example using a recursive directive  http   jsfiddle net n8dPm  Taken from https   groups google com forum   topic angular vswXTes FtM  module directive  tree   function  compile    return       restrict   E       scope   family            template             lt p gt    family name    lt  p gt              lt ul gt                    lt li ng-repeat  child in family children  gt                        lt tree family  child  gt  lt  tree gt                   lt  li gt               lt  ul gt        compile  function tElement  tAttr            var contents   tElement contents   remove            var compiledContents          return function scope  iElement  iAttr                if  compiledContents                    compiledContents    compile contents                             compiledContents scope  function clone  scope                         iElement append clone

User · Answer

When making something like this the best solution is an recursive directive  However  when you make such an directive you find out that AngularJS gets into an endless loop   The solution for this is to let the directive remove the element during the compile event  and manually compile and add them in the link events   I found out about this in this thread  and abstracted this functionality into a service    module factory  RecursionHelper      compile   function  compile       return                          Manually compiles the element  fixing the recursion loop              param element             param  link  A post-link function  or an object with function s  registered via pre and post properties              returns An object containing the linking functions                      compile  function element  link                  Normalize the link parameter             if angular isFunction link                    link     post  link                                  Break the recursion loop by removing the contents             var contents   element contents   remove                var compiledContents              return                   pre   link  amp  amp  link pre    link pre   null                                         Compiles and re-adds the contents                                     post  function scope  element                          Compile the contents                     if  compiledContents                           compiledContents    compile contents                                                Re-add the compiled contents to the element                     compiledContents scope  function clone                           element append clone                                                   Call the post-linking function  if any                     if link  amp  amp  link post                           link post apply null  arguments                                                                                  With this service you can easily make a tree directive  or other recursive directives   Here is an example of an tree directive   module directive  tree   function RecursionHelper        return           restrict   E           scope   family                template                 lt p gt    family name    lt  p gt                  lt ul gt                        lt li ng-repeat  child in family children  gt                            lt tree family  child  gt  lt  tree gt                       lt  li gt                   lt  ul gt            compile  function element                return RecursionHelper compile element                          See this Plunker for a demo  I like this solution best because    You don t need an special directive which makes your html less clean  The recursion logic is abstracted away into the RecursionHelper service  so you keep your directives clean    Update  Added support for a custom linking functions

User · Answer

angular-ui-tree seems to do a good job for me

[angularjs] Is it possible to make a Tree View with Angular?

Examples related to angularjs