npm install angular-tree-control

Angular Tree Control

About angular-tree-control

Angular Tree Control is a versatile and user-friendly npm package specifically designed for developers working with AngularJS. It provides a dynamic and interactive tree component that can be easily integrated into any Angular-based application. The primary purpose of Angular Tree Control is to display hierarchical data structures in a clear and navigable tree format, making it an ideal choice for projects that require a visual representation of nested data. This package supports a variety of operations such as expand/collapse, select/deselect, and dynamic data loading, which are essential for managing large datasets efficiently.

To start using Angular Tree Control in your project, you can easily install it by running the command `npm install angular-tree-control`. This simple installation process integrates seamlessly with your existing Angular application, allowing you to utilize the tree control component without any hassle. Once installed, Angular Tree Control can be customized to meet specific requirements, such as configuring node templates or adjusting the tree's appearance through CSS. The flexibility and ease of installation make it a popular choice among developers looking to enhance the functionality and user experience of their applications.

One of the key benefits of using Angular Tree Control is its ability to improve the overall user interface by providing a structured and interactive method for data exploration. Users can quickly navigate through complex structures, making it easier to locate specific items or understand relationships within the data. Additionally, Angular Tree Control is designed to be highly performable, ensuring that it can handle large amounts of data without compromising on speed or responsiveness. This makes it an excellent tool for applications that deal with extensive datasets and require a robust solution for data management and representation.

More from wix

wix npm packages

Find the best node modules for your project.

Search npm

react-native-calendars

React Native Calendar...

Read more
,

commons-validator-js

JavaScript port of Apache Commons...

Read more
,

react-native-notifications

Advanced Push Notifications (Silent, interactive notifications) for iOS &...

Read more
,

angular-tree-control

Angular Tree...

Read more
,

google-maps-locales

Google Maps...

Read more
,

pip-requirements-js

A robust parser for requirements...

Read more
,

facebook-locales

Maps locales to Facebook...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

grunt, grunt-release, karma-script-launcher, karma-chrome-launcher, karma-firefox-launcher, karma-html2js-preprocessor, karma-jasmine, karma-coffee-preprocessor, requirejs, karma-requirejs, karma-phantomjs-launcher, karma, grunt-karma, karma-growl-reporter, grunt-contrib-watch, grunt-contrib-connect, karma-coverage, coveralls

Documentation

A README file for the angular-tree-control code repository. View Code

Angular Tree Control

npm version Bower version Build Status Coverage Status

Pure AngularJS based tree control component.

ScreenShot

To get started, check out wix.github.io/angular-tree-control

Why yet another tree control

We have tried a number of tree controls built for angular and experience a lot of issues with each. As a result we decided to build a new tree control with the following design guidelines

Installation

Bower: bower install angular-tree-control

The tree control can be used as a Dom element or as an attribute.

Copy the script and css into your project and add a script and link tag to your page.

<script type="text/javascript" src="/angular-tree-control.js"></script>

<!-- Include context-menu module if you're going to use menu-id attribute -->
<script type="text/javascript" src="/context-menu.js"></script>

<!-- link for CSS when using the tree as a Dom element -->
<link rel="stylesheet" type="text/css" href="css/tree-control.css">

<!-- link for CSS when using the tree as an attribute -->
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">

Add a dependency to your application module.

angular.module('myApp', ['treeControl']);

Add tree elements to your Angular template

<!-- as a Dom element -->
<treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</treecontrol>
<!-- as an attribute -->
<div treecontrol class="tree-classic"
   tree-model="dataForTheTree"
   options="treeOptions"
   on-selection="showSelected(node)"
   selected-node="node1">
   employee: {{node.name}} age {{node.age}}
</div>

and add the data for the tree

$scope.treeOptions = {
    nodeChildren: "children",
    dirSelectable: true,
    injectClasses: {
        ul: "a1",
        li: "a2",
        liSelected: "a7",
        iExpanded: "a3",
        iCollapsed: "a4",
        iLeaf: "a5",
        label: "a6",
        labelSelected: "a8"
    }
}
$scope.dataForTheTree =
[
    { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

Usage

Attributes of angular treecontrol

The tree labels

The Angular Tree control uses a similar paradigm to ng-repeat in that it allows using the current node as well as values from the parent scope. The current node is injected into the scope used to render the label as the node member (unlike ng-repeat, we do not allow to name the current node item in the transcluded scope).

In order to render a template that takes a value X from the parent scope of the tree and value Y from the current node, use the following template {{X}} {{node.Y}}

Styling

The angular-tree-control renders to the following DOM structure

<treecontrol class="tree-classic">
  <ul>
    <li class="tree-expanded">
      <i class="tree-branch-head"></i>
      <i class="tree-leaf-head"></i>
      <div class="tree-label">
         ... label - expanded angular template is in the treecontrol element ...
      </div>
      <treeitem>
        <ul>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label tree-selected">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
          <li class="tree-leaf">
            <i class="tree-branch-head"></i>
            <i class="tree-leaf-head"></i>
            <div class="tree-label">
              ... label - expanded angular template is in the treecontrol element ...
            </div>
          </li>
        </ul>
      </treeitem>
    </li>
  </ul>
</treecontrol>

The following CSS classes are used in the built-in styles for the tree-control. Additional classes can be added using the options.injectClasses member (see above)

Reference

This tree control is based in part on the angular.treeview component

License

The MIT License.

See LICENSE