Serhiy Serhiy - 7 days ago 6
AngularJS Question

how to find out many levels opened?

I use angularjs. view item with it's subItems and it's subItems etc.
when I click on e.g. level 1-1, I want to find out how many sublevels are opened.How to do it?

enter image description here

Here is the html code:

main level

<div>
<div ng-repeat="level in vm.levels track by $index" >
<div layout="row" >
<div class="padding-left-20">
<md-icon style="font-size:16px;" aria-hidden="true" class=" ng-scope md-cyan-theme material-icons zmdi zmdi-plus-circle-o" ng-click="vm.createChild(level)></md-icon>
</div>
<div>
<div>
<span class="capitalize">{{level.name)}}</span>
</div>
</div>
<div layout="row" layout-align="end end" flex="10" ng-click="vm.shouldShowChildren[$index]=!vm.shouldShowChildren[$index]>
<div>
<md-icon class=" menu-toggle-icon" style="font-size:20px;" md-font-icon="zmdi zmdi-chevron-right" ng-class="{ open: vm.shouldShowChildren[$index] }"></md-icon>
</div>
</div>
</div>
<div ng-if="vm.shouldShowChildren[$index]" class="collapseChildren" dragula="'folder-bag'">
<div ng-repeat="child in level.children track by child.id" ng-include="'app/level-child.tmpl.html' "></div>
</div>
</div>
</div>


level-child.tmpl.html

<div layout="row" class=" btn hoverChildIteration padding-left-40" id={{child.id}} ng-init="vm.dragContainerId = child.id" >
<div class="padding-left-30 ">
<md-icon style="font-size:16px;" id={{child.id}}icon aria-hidden="true" class=" ng-scope md-cyan-theme material-icons zmdi zmdi-plus-circle-o" title="add sub folder" ></md-icon>
</div>
<div class="names" flex >
<span class="capitalize">{{child.name)}}</span>
</div>
<div layout="row" layout-align="end end" flex="10" ng-click="showGrandChildren[child.id]=!showGrandChildren[child.id]">
<div >
<md-icon class="menu-toggle-icon" id={{child.id}}chevron style="font-size:20px;" md-font-icon="zmdi zmdi-chevron-right" ng-class="{ open: showGrandChildren[child.id] }"></md-icon>
</div>
</div>












Solved issue

I have next level DOM element.So I just check if it exists, and if it's true - I just send its children to check if there exist.If yes - level++

<div ng-if="vm.shouldShowChildren[$index]" class="collapseChildren" dragula="'folder-bag'">
<div ng-repeat="child in level.children track by child.id" ng-include="'app/level-child.tmpl.html' "></div>
</div>

Answer

Solved.Updated my question with Solved*

Comments