angular-treeish v0.1.4

Installation

Bower

$ bower install angular-treeish

npm

$ npm install angular-treeish

Usage

Module

Load source file (assuming you installed angular-treeish using Bower):

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

Make module ieTreeish a dependency of your module:

angular.module('app', [
    ...,
    'ieTreeish',
    ...
]);

Directives

nestedTree

<div ng-controller="SomeCtrl as some">
    <nested-tree nodes="some.data" template-url="/templates/some/data.html"></nested-tree>
</div>

Attributes

• nodes, required
• template-url, required
• unfold-level, optional, default: 0
• build-tree, optional, default: true
• id-property, optional, default: "id"
• parent-id-property, optional, default: "parentId"
• children-property, optional, default: "children"
• controller, optional, default: undefined

Template example

<ul ng-hide="collapsed(parent)">
    <li ng-class="{first: $first, last: $last}" ng-repeat="node in nodes">
        <a href="" ng-click="toggle(node)">
            <span ng-show="collapsed(node)">&plus;</span>
            <span ng-show="!collapsed(node)">&minus;</span>
            {{ node.id }}: {{ node.name }}
        </a>
        <nested-leaf node="node"></nested-leaf>
    </li>
</ul>

Scope helpers

• <nested-leaf node="node"></nested-leaf>
• collapsed(node)
• toggle(node)
• nodes
• parent
• level

stackedTree

<div ng-controller="SomeCtrl as some">
    <table stacked-tree nodes="some.data" template-url="/templates/some/data.html"></table>
</div>

Attributes

• nodes, required
• template-url, required
• unfold-level, optional, default: 0
• build-tree, optional, default: true
• id-property, optional, default: "id"
• parent-id-property, optional, default: "parentId"
• children-property, optional, default: "children"
• controller, optional, default: undefined

Template example

<tr ng-class="{first: $first, last: $last}" ng-hide="collapsed(parent)">
    <td style="padding-left:{{ level * 13 }}px;">
        <a href="" ng-click="toggle(node)">
            <span ng-show="collapsed(node)">&plus;</span>
            <span ng-show="!collapsed(node)">&minus;</span>
            {{ node.id }}
        </a>
    </td>
    <td>{{ node.name }}</td>
</tr>

Scope helpers

• $first
• $last
• collapsed(node)
• toggle(node)
• node
• parent
• level
• controller