AngularJS Display TreeView collapsed

AngularJS Display TreeView collapsed

AngularJS Display TreeView collapsed
AngularJS Display TreeView collapsed
Today I am handled this task anglarjs display treeview collapsed so i am solved this task so this task share with you and task code post this site. I hope this task your very useful.  Angularjs Xeditable

First angularjs html pages designed followed code.

View.html

<div ng-app="myApp">
  <div ng-controller="myController">

    <div>
      <input type="button" value="TREE 1" data-ng-click="treeList = treeList1" /> <input type="button" value="TREE 2" data-ng-click="treeList = treeList2" />
    </div>

    <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; ">
      <span><b>Selected Node</b> : {{currentNode.roleName}}</span>
    </div>

    <div
      data-angular-treeview="true"
      data-tree-model="treeList"
      data-node-id="treeId"
      data-node-label="treeName"
      data-node-children="children" >
    </div>

  </div>
</div>

Controller.js

(function(){
  
  //angular module
  var myApp = angular.module('myApp', ['angularTreeview']);

  //test controller
  myApp.controller('myController', function($scope){

   //test tree model 1
    $scope.treeList1 = [
        { "roleName" : "User", "roleId" : "role1", "children" : [
          { "treeName" : "subUser1", "roleId" : "role11", "children" : [] },
          { "treeName" : "subUser2", "roleId" : "role12", "children" : [
            { "treeName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "treeName" : "Admin", "roleId" : "role2", "children" : [] },

        { "treeName" : "Guest", "roleId" : "role3", "children" : [] }
      ];

   //test tree model 2
    $scope.treeList2 = [
        { "treeName" : "User", "roleId" : "role1", "children" : [
          { "treeName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "treeName" : "subUser2", "roleId" : "role12", "collapsed" : true, "children" : [
            { "treeName" : "subUser2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "roleName" : "Admin", "roleId" : "role2", "children" : [
          { "roleName" : "subAdmin1", "roleId" : "role11", "collapsed" : true, "children" : [] },
          { "roleName" : "subAdmin2", "roleId" : "role12", "children" : [
            { "roleName" : "subAdmin2-1", "roleId" : "role121", "children" : [
              { "roleName" : "subAdmin2-1-1", "roleId" : "role1211", "children" : [] },
              { "roleName" : "subAdmin2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]},

        { "treeName" : "Guest", "roleId" : "role3", "children" : [
          { "treeName" : "subGuest1", "roleId" : "role11", "children" : [] },
          { "treeName" : "subGuest2", "roleId" : "role12", "collapsed" : true, "children" : [
            { "treeName" : "subGuest2-1", "roleId" : "role121", "children" : [
              { "treeName" : "subGuest2-1-1", "roleId" : "role1211", "children" : [] },
              { "treeName" : "subGuest2-1-2", "roleId" : "role1212", "children" : [] }
            ]}
          ]}
        ]}
      ];

      
      
    //treeList1 to treeview
    $scope.treeList = $scope.treeList1;
  
  });
  
})();


treeview.js


/*
    angular.treeview.js
*/
(function(l){l.module("angularTreeview",[]).directive("treeModel",function($compile){return{restrict:"A",link:function(a,g,c){var e=c.treeModel,h=c.nodeLabel||"label",d=c.nodeChildren||"children",k='<ul><li data-ng-repeat="node in '+e+'"><i class="collapsed" data-ng-show="node.'+d+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'+
d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'+h+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'+d+'" data-node-id='+(c.nodeId||"id")+" data-node-label="+h+" data-node-children="+d+"></div></li></ul>";e&&e.length&&(c.angularTreeview?(a.$watch(e,function(m,b){g.empty().html($compile(k)(a))},!1),a.selectNodeHead=a.selectNodeHead||function(a,b){b.stopPropagation&&b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=
!0;b.returnValue=!1;a.collapsed=!a.collapsed},a.selectNodeLabel=a.selectNodeLabel||function(c,b){b.stopPropagation&&b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=!0;b.returnValue=!1;a.currentNode&&a.currentNode.selected&&(a.currentNode.selected=void 0);c.selected="selected";a.currentNode=c}):g.html($compile(k)(a)))}}})})(angular);
AngularJS Display TreeView collapsed Developerinvention 5 of 5
AngularJS Display TreeView collapsed AngularJS Display TreeView collapsed Today I am handled this task anglarjs display treeview col...

Share this

Related Posts

Previous
Next Post »

Xolo Offer