Change css child elements nav tree

Question

Our menu is loaded from a .json file and it's possible that some links have child elements, and those child elements can have their own child elements. The child elements should get darker the deeper you go.

At first the ids were something like:

1
**1-1
**1-2
2
3
**3-1
**3-2
****3-2-1
4

So I could easily calculate the characters and define the levels.

However, now the ids have been changed to:

1
**2
**3
4
**5
**6
***7

Which makes it impossible to define levels based on the id.

Is there a way I could know how deep a child element is?

<md-list-item ng-repeat="item in menus">
   <md-button ng-if="!(item.children.length > 0)" ng-class="{ selected: isSelected(item) }"></md-button>
   <md-button ng-if="item.children.length > 0"></md-button>
   <md-list ng-if="item.children" report-tree menus="item.children">
  </md-list>
</md-list-item>

Answer 1

One way you can identify the level of a child element, is to use a recursively included template and each time the template is included, you increment a scope variable using ng-init.

For example:

Initial ng-include:

We set a scope variable called "level" to 0.

<div ng-include="'item.html'" ng-init="level = 0;"></div>

Template:

<div ng-repeat="item in items" ng-style="{'background-color': 'rgba(255, 0, 0, 0.5)'}">

  <span ng-style="{'padding-left': (25 * level) + 'px'}">{{item.title}}</span>

  <!-- if the item has children, include the template again -->
  <div ng-if="item.children.length > 0">
    <!-- set the next template's items to be the children of the current item -->
    <!-- increment level by 1 -->
    <div ng-init="items = item.children; level = level + 1;" ng-include="'item.html'"></div>
  </div>
</div>

So if the item has children, include the template again. For this template we define its items to be the children of the current item and we increment the level variable by 1.

If you look at the ng-style on the <span>, you can see how you can use this level variable. In this example each level will have increasing padding. Level 0 will have 0 padding, level 1 will have 25px padding and so on and so forth.

As to changing the colour of the items as you go down, I had originally thought I could accomplish this like I've done the padding on the <span> using level to calculate a value.

In the plunker below, each item has an opacity of 0.5. When an item has sub-items, another element with opacity 0.5 is added above it effectively halving the visible opacity of the item beneath. So for the example in the plunker which has 3 levels of items, the opacity of items on level 0 is 0.5 * 0.5 * 0.5 which is equivalent to 0.125 while level 1 appears as 0.25 and level 2 as 0.5.

Plunker

I am unsure if this will be of any help to you with your Angular Material code. If the children of your md-list are child elements of the md-list element, perhaps adding a background-color with opacity of 0.5 will accomplish the same.