# angular-treeish

> Angular tree view directives attempting to be as basic as possible

Latest version **0.1.4** (published 2016-06-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install angular-treeish
pnpm add angular-treeish
yarn add angular-treeish
bun add angular-treeish
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2016-06-28 |
| First published | 2016-06-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| Author | kemystrie |
| Maintainers | kemystrie |
| Keywords | angular, directive, tree |

## Links

- npm: https://www.npmjs.com/package/angular-treeish
- Repository: https://github.com/kemystrie/angular-treeish
- Homepage: https://github.com/kemystrie/angular-treeish#readme
- Issues: https://github.com/kemystrie/angular-treeish/issues
- npm.io page: https://npm.io/package/angular-treeish

## Dependencies (1)

- [angular](https://npm.io/package/angular.md) <2

## Recent versions

- 0.1.4 (latest) — 2016-06-28
- 0.1.3 — 2016-06-28
- 0.1.2 — 2016-06-28
- 0.1.1 — 2016-06-28
- 0.1.0 — 2016-06-28
- 0.0.8 — 2016-06-27
- 0.0.7 — 2016-06-27
- 0.0.6 — 2016-06-26
- 0.0.5 — 2016-06-26
- 0.0.4 — 2016-06-26
- 0.0.3 — 2016-06-26
- 0.0.2 — 2016-06-26
- 0.0.1 — 2016-06-26

## README

# 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`

---
_Source: https://npm.io/package/angular-treeish · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._