2016-04-28 12 views
3

メニューは.jsonファイルから読み込まれ、リンクによっては子要素があり、それらの子要素には独自の子要素を持たせることができます。子要素は、深く進むにつれて暗くなるはずです。cssの子要素のナビゲーションツリーの変更

最初のIDのようなものがあった。だから私は簡単に文字を計算し、レベルを定義することができ

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> 

答えて

1

一つの方法は、再帰的にインクルードされたテンプレートを使用することで、テンプレートが含まれているたびに、あなたはng-initを使用してスコープの変数をインクリメント。例えば

初期NGを含む:

我々は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> 

アイテムに子がある場合は、再度テンプレートを含めます。このテンプレートのために我々は、現在の項目の子であることをその項目を定義し、我々はあなたが<span>ng-styleを見れば、あなたはこのlevel変数を使用することができますどのように見ることができます。1.

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の背景色を追加すると同じ結果が得られます。

+1

ブリリアント!クリーンで簡単なソリューション – Greg

関連する問題