更改css子元素导航树

Question

我们的菜单是从.json文件加载的，有可能某些链接具有子元素，而这些子元素可以具有其自己的子元素。你走得越深，孩子的元素越黑。

起初，IDS是这样的：

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

所以我可以很容易地计算出人物和定义级别。

不过，现在的ID已更改为：

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

这使得它无法界定根据id水平。

有没有一种方法可以让我知道子元素有多深？你可以找出一个子元素的水平

<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

的一种方法，是使用递归包括模板，每个包含模板时，你增加使用ng-init一个范围变量。

例如：

初始NG-包括：

我们设定所谓的 “级别” a范围变量为0。

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

模板：

<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> 

所以，如果该项目有孩子，再次包括模板。对于这个模板中，我们定义它的项目是当前项目的孩子，我们通过1

递增level变量，如果你看一下ng-style的<span>，你可以看到你如何使用这个level变量。在这个例子中，每个级别都会有越来越多的填充。 0级将有0填充，1级将有25px填充等等等等。

至于改变项目的颜色，当你下去时，我原本以为我可以做到这一点，就像我使用level来计算一个值，在<span>上做了填充。

在下面的蹲点中，每个物品的不透明度为0.5。当一个项目具有子项目时，另一个不透明度为0.5的元素将被添加到其上方，从而有效地减少下方项目的可见不透明度。因此，对于具有3个等级项目的闯入者中的示例，等级0上的项目的不透明度为0.5 * 0.5 * 0.5，相当于0.125，而等级1显示为0.25，等级2显示为0.5。

Plunker

我不能确定这是否会是任何帮助你与你的角材料代码。如果md-list的孩子是md-list元素的子元素，则可能添加不透明度为0.5的背景颜色可以实现相同效果。