javascript - 更改 css 子元素导航树

Question

我们的菜单是从 .json 文件加载的，某些链接可能有子元素，而这些子元素可以有自己的子元素。越深入，子元素应该越暗。

起初，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>

Answer 1

识别子元素级别的一种方法是使用递归包含的模板，每次包含模板时，使用 ng-init 递增范围变量。 .

例如:

初始 ng-include:

我们将一个名为“level”的范围变量设置为 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>

因此，如果项目有子项，请再次包含模板。对于此模板，我们将其项定义为当前项的子项，并递增 level。变量 1.

如果您查看 ng-style在 <span> 上, 你可以看到如何使用这个 level多变的。在此示例中，每个级别都将增加填充。级别 0 将有 0 填充，级别 1 将有 25px 填充等等。

关于在向下移动时更改项目的颜色，我最初认为我可以像在 <span> 上完成填充一样完成此操作使用 level计算一个值。

在下面的 plunker 中，每个项目的不透明度为 0.5。当一个项目有子项目时，另一个不透明度为 0.5 的元素被添加到它上面，有效地将下面项目的可见不透明度减半。因此，对于具有 3 个项目级别的 plunker 中的示例，0 级项目的不透明度为 0.5 * 0.5 * 0.5相当于0.125而级别 1 显示为 0.25，级别 2 显示为 0.5。

Plunker

我不确定这对您的 Angular Material 代码是否有帮助。如果你的 child md-list是 md-list 的子元素元素，也许添加不透明度为 0.5 的背景颜色将实现相同的效果。