javascript - 使用 ng-repeat-start 和 ng-repeat-end 切换嵌套的 md-list-item

Question

我正在尝试切换菜单项(带有ng-repeat-start的md-list-item)并且每个项目都有一个子项目 (带有 ng-repeat-end 的 md-list-item)。

我希望当用户单击特定的菜单项时仅会出现子项目。

但我不知道如何使用 ng-repeat-start 和 ng-repeat-end

这是我到目前为止所做的。 DEMO 。您可以单击菜单，但所有菜单项中的所有子项都会被切换。

Answer 1

向 JSON 数据添加一个 open 标志，以便每个列表项都有自己的标志，然后在单击项时仅在单击的项上切换标志。

JS:

$scope.clickItem = function(item) {
  item.open = !item.open
}

HTML:

<md-list-item  ng-click="clickItem(item)" style="margin-left: 10px;"ng-repeat-start="item in nestedList">                  
  {{item.id}}
</md-list-item>
<md-list-item ng-show="item.open" style="margin-left: 50px;" ng-repeat-end ng-repeat="child in item.children">                  
  {{child.id}}
</md-list-item>

更新笔:http://codepen.io/anon/pen/RKpZmm