Directive to display selectable tree directory structure
0 people use it
Author: 10200556?v=3 jperugini

Angular FinderTree

Angular Finder Tree is a directive that generate a selectable tree similar to a file explorer.


AngularJS v1.2+


Browser support

| Chrome | Firefox | Safari | Opera | IE9+ | |:-------------------------------------:|:-------------------------------------:|:-------------------------------------:|:-------------------------------------:|:----:| | ok | ok | ok | ok | ok |


1. Run the following comand in your termial

2. Add the javascript and css files to your index.html

3. Add module dependency in your app.js

4. Call the directive

Configuring Finder Tree


  • The JSON data passed to the directive should be a tree of elements: { 'name': 'MainDir', 'dirs': [{ 'name': 'SubDir1', 'dirs': [{ 'name': 'SubSubDir1', 'dirs': [{...}], 'files': [{...}] }, { ... }], 'files': [{ 'name': File1' }, { .... }] } }

  • ng-model should be any variable in your controller. The directive will store the selected file and the path to the file.

    • The file can contain any attribut you want, it will be passed to the model when the file is selected.
    • The path is an array containing the list of the folders name in which the file is located.
  • search-filter is used to find specific document within any directory of your data. Pass it a string variable and it will filter the element for you.


You can edit the default Css file finder-tree.css if you want to make a new theme.


Feel free to contribute by forking, opening issues, pull requests etc.


Released under the terms of MIT License.

comments powered by Disqus
This page was last updated almost 3 years ago.