Adding Collapse All and Expand All buttons on angular js tree

https://angularjs.org/

We can Collapse or Expand full angular ui tree by adding the buttons with the ng-controller scope

<a href="javascript:void(0);" class="pull-right"> 
                        <button class="btn btn-mini" ng-click="collapseAll()">
                            <i class="ace-icon fa fa-minus"></i>
                            Collapse all
                        </button>
                    </a> 

					<a href="javascript:void(0);" class="pull-right"> 
                        <button class="btn btn-mini" ng-click="expandAll()">
                            <i class="ace-icon fa fa-plus"></i>
                            Expand all
                        </button>
                    </a>

Add the id on the div tree is called in as

<div ui-tree="options" id="tree-root"> 

Call the expand and collapse functions in your angular controller as

  var getRootNodesScope = function() {
                return angular.element(document.getElementById("tree-root")).scope();
            };

            $scope.collapseAll = function() {
                var scope = getRootNodesScope();
                scope.collapseAll();
            };

            $scope.expandAll = function() {
                var scope = getRootNodesScope();
                scope.expandAll();
            };

You can see the working demo Here


Leave a Reply

Your email address will not be published. Required fields are marked *