javascript - Faster Angular Tree Menu -
i wrote snippet of code in angular creates tree menu out of json:
<!-- tree menu template--> <script type="text/ng-template" id="tree_item_renderer.html"> <a href="{{data.url}}" ng-click="togglehidechildren(data)"> <i ng-class="{'fa fa-chevron-circle-right':!data.expanded, 'fa fa-chevron-circle-down': data.expanded}" ng-show="data.nodes"></i> {{data.name}} </a> <div class="treeitem" ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" ng-hide="data.hidden" ng-init="data.hidden=true"></div> </script> <!-- end tree menu template--> <!-- tree menu --> <div class="row top-buffer"> <div class="col-md-12"> <div class="treeroot" ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></div> </div> </div> <!-- end tree menu -->
sample tree menu:
$scope.tree = {"name":"general", "nodes": [ {"name":"summary", "url":"#/general/summary"}, {"name":"a stats", "nodes": [ {"name":"sub 1"}, {"name":"sub 2"} ]}, {"name":"b stats"} ]}
this code works fine. however, once tree menu has several hundred items in it, angular app takes longer , longer load (> 5 seconds). suspect because of large amounts of ng-repeat
, ng-includes
going on here.
is there faster way can using angular features? or have ditch angular speed gains?
Comments
Post a Comment