angular-recursive

AngularJS directives for recursive data.

Added by: Sam Deering

GitHub

Repository

quramy/angular-recursive

Stats

Stars: 4

Watchers: 4

Forks: 0

Module Description

Andular Recursive

This is AngularJS directive for tree strucuture datum recursively.

How to install

Download angular-recursive.js file from here, or use bower.

$ bower install angular-recursive

And load script into your html.

...
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-recursive/js/angular-recursive.js"></script>
...

Usage

Load quramy-recursive module into your app.

var myApp = angular.module('myApp', ['quramy-recursive']);

Setup recursive structure data on your scope.

myApp.controller('Ctrl', ['$scope', function($scope){
    $scope.treeData = {
        name: 'root',
        children: [
            { name: 'usr', children:[{ name: 'lib' }, {name: 'bin'}] },
            { name: 'var' }
        ]
    };
});

Markup q-recurse and q-recurse-node on elements to recurse in your view.

<div ng-controller="Ctrl">
    <div q-recurse="treeData">
        <span>{{treeData.name}}</span>
        <ul>
            <li ng-repeat="childNode in treeData.children" q-recurse-node="childNode"></li>
        </ul>
    </div>
</div>

Run your app, so you can get following html:


root

  • usr
  • lib
  • bin
  • var

Reference

  • q-recurse

This directive stands for starting recursion. Set "root" of your tree data to this attribute.

  • q-recurse-node

This directive stands for ending recursion. Set "next node" of your tree data to this attribute.
The element marked up this attribute must have a parent element marked up q-recurse attribute. It expands elements contained in the element maked up q-recurse into itself until "next node" data is null or undefined.

  • q-recurse-var

Set an alias recursive structure data.

<div q-recurse="someData.linkList" q-recurse-var="myLink">
    <span>{{myTree.name}}</span>
  <div q-recurse-node="myLink.next"></div>
</div>
$scope.someData = {
    linkList:{
        name: 'first',
        next: {
            name: 'second',
            next: {
                name: 'last'
            }
        }
    }
};
  • $depth

You can access recursion level in yout html using scope.$depth (e.g. $index in ng-repeat).

The following example limits the number of recursive expansion to 3 times.

<div q-recurse="linkData">
    Recursion level: {{$depth}}
    <div ng-if="$depth < 3" q-recurse-node="linkData.next"></div>
</div>

Module stats last updated: 2015-04-19 11:33:19

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!