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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -