更改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的背景顏色可以實現相同效果。