Question

我尝试切换menu-item （带有ng-repeat-start的md-list-item），每个项目都有sub-items （md-list） -item with ng-repeat-end）。

我希望当用户点击特定的menu-item ITS ONLY sub-items时会显示。

但我无法弄明白如何使用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

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

1 个答案: