TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 30 June 2014
Creating a tree structure in AngularJS is simple. There are few variables that need to be set in order to create a tree hierarchy:
Similar: Add Item Dynamically in Angular TreeView
Although creating a tree hierarchy on your own in your application scope is possible, it is better to use the already built-in methods in TreeView service which is part of IntegralUI TreeView directive, all above variables are optional, except for the text variable. In following section we will show you how to use these methods which are part of this service.
The simplest way to add an item to a tree structure is to use the javascript push method, like this:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){
$scope.data = [];
$scope.treeName = "treeSample";
var createNewItem = function(){
return { text: "Item" + $scope.data.length };
}
$scope.data.push(createNewItem());
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.css" />
<link rel="stylesheet" href="css/integralui.treeview.css" />
<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />
<script type="text/javascript" src="external/angular.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<iui-treeview name="{{treeName}}" items="data"></iui-treeview>
</div>
</body>
</html>
The same can be done using the addItem method in our tree view service:
$treeService.addItem($scope.treeName, createNewItem());
One additional advantage of this method is that allows you to specify the parent item to which the newly created item will be added as a child. In this way instead of using the plain javascript methods to create your tree structure, use of tree view service is cleaner and faster.
Note The treeName variable we have set in our application scope is used by the TreeView directive to distinguish it from other TreeView directives which may be present in our application. This name is also used by the IntegralUITreeViewService to apply callings to specific methods for the TreeView which name attribute matches the value of treeName variable.
Above method will only add items to the end of the tree hierarchy. However in some case we may need to insert a new item to a specific location. To do this we wil use different methods, there are three available methods:
For example, here is how to add a new item at position 1 as a child of currently selected item:
$treeService.insertItemAt($scope.treeName, createNewItem(), 1, getCurrentSelection());
Whenever a new item is added to the TreeView, the itemAdding and itemAdded events are fired. This gives you further control on how and when you want to add new items to the tree view. By handling the itemAdding event you can cancel the whole process.
Finally, any existing item in tree structure can also be removed from it. For this purpose three methods are available:
In following example we are showing how to remove the currently selected item from the TreeView.
var getCurrentSelection = function(){
return $treeService.selectedItem($scope.treeName);
}
$treeService.removeItem($scope.treeName, getCurrentSelection());
In similar way as with adding methods, whenever an item is deleted from the TreeView, the itemRemoving and itemRemoved events are fired. The itemRemoving event can also ne handled to prevent a specific item to become deleted when some condition is fullfilled.
To check how this works out, look at the Add/Remove Items in TreeView for AngularJS online sample.