Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JimLiu/angular-ui-tree
A tree component for AngularJS, without jQuery as dependency.
https://github.com/JimLiu/angular-ui-tree
angular javascript tree-component
Last synced: 3 months ago
JSON representation
A tree component for AngularJS, without jQuery as dependency.
- Host: GitHub
- URL: https://github.com/JimLiu/angular-ui-tree
- Owner: angular-ui-tree
- License: mit
- Created: 2013-11-01T07:28:24.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-03-05T08:06:31.000Z (over 3 years ago)
- Last Synced: 2024-08-05T18:06:37.116Z (3 months ago)
- Topics: angular, javascript, tree-component
- Language: JavaScript
- Homepage: http://angular-ui-tree.github.io/angular-ui-tree
- Size: 14.8 MB
- Stars: 2,573
- Watchers: 118
- Forks: 783
- Open Issues: 173
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Angular UI Tree
======================
[](https://travis-ci.org/angular-ui-tree/angular-ui-tree) [](https://gitter.im/angular-ui-tree/angular-ui-tree?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery. If you are a user who uses `angular-nestedSortable`, this is [How to migrate From v1.x to v2.0](https://github.com/JimLiu/angular-ui-tree/wiki/Migrate-From-v1.x-to-v2.0).
### Considering Contributing?
Read our contributing guidelines and become a contributing member of Angular UI Tree!
[CONTRIBUTING](https://github.com/angular-ui-tree/angular-ui-tree/blob/master/CONTRIBUTING.md)
## Features
- Uses the native AngularJS scope for data binding
- Sorted and move items through the entire tree
- Prevent elements from accepting child nodes
## Supported browsers
The Angular UI Tree is tested with the following browsers:
- Chrome (stable)
- Firefox
- IE 8, 9 and 10
For IE8 support, make sure you do the following:
- include an [ES5 shim](https://github.com/es-shims/es5-shim)
- make your [AngularJS application compatible with Internet Explorer](http://docs.angularjs.org/guide/ie)
- use [jQuery 1.x](http://jquery.com/browser-support/)
## Demo
Watch the Tree component in action on the [demo page](http://angular-ui-tree.github.io/angular-ui-tree/).
## Requirements
- Angularjs
## Usage
### Download
- Using [bower](http://bower.io/) to install it. `bower install angular-ui-tree`
- [Download](https://github.com/angular-ui-tree/angular-ui-tree/archive/master.zip) from github.
### Load CSS
Load the css file: `angular-ui-tree.min.css` in your application:
```html
```
### Load Script
Load the script file: `angular-ui-tree.js` or `angular-ui-tree.min.js` in your application:
```html
```
### Code
Add the sortable module as a dependency to your application module:
```js
var myAppModule = angular.module('MyApp', ['ui.tree'])
```
Injecting `ui.tree`, `ui-tree-nodes`, `ui-tree-node`, `ui-tree-handle` to your html.
#### HTML View or Templates
```html
-
{{item.title}}
-
{{subItem.title}}
```
**Developing Notes:**
- Adding `ui-tree` to your root element of the tree.
- Adding `ui-tree-nodes` to the elements which contain the nodes. `ng-model` is required, and it should be an array, so that the directive knows which model to bind and update.
- Adding `ui-tree-node` to your node element, it always follows the `ng-repeat` attribute.
- Adding `ui-tree-handle` to the element used to drag the object.
- All `ui-tree`, `ui-tree-nodes`, `ng-model`, `ui-tree-node` are necessary. And they can be nested.
- If you don't add a `ui-tree-handle` for a node, the entire node can be dragged.
**Styling Notes:**
- While an element is being dragged, it is temporarily removed from the DOM and injected just before closing `