javascript - 单击列表项后显示子列表

Question

我将以下 json 传递到我的 View :

$scope.mockData = [
  {
    "folder": "folder1",
    "reports": [{ "name": "report1" }, { "name": "report2" }, { "name": "report3" }]
  },
  {
    "folder": "folder2",
    "reports": [{ "name": "report5" }, { "name": "report6" }, { "name": "report7" }]
  },
  {
    "folder": "folder3",
    "reports": [{ "name": "report8" }, { "name": "report9" }, { "name": "report10" }]
  }
];

要迭代文件夹列表，我的 View 中有以下内容:

<div class="row" ng-repeat="item in mockData | filter:query">
  <div class="col-md-6">
    <a href="" class="list-group-item" ng-cloak >
      <i class="glyphicon glyphicon-folder-close"></i>
      &nbsp;{{item.folder}}
    </a>
  </div>
</div>

我想在我的 View 中实现以下功能: 当我点击:

<a href="" class="list-group-item" ng-cloak >
      <i class="glyphicon glyphicon-folder-close"></i>
      &nbsp;{{item.folder}}
</a> 

我应该看到一个新的 div，但现在包含以下项目:

"reports": [{ "name": "report1" }, { "name": "report2" }, { "name": "report3" }

我该怎么做？

Answer 1

您可以向 MOCK JSON 添加 bool 参数，例如 'showFolderContents':false。向文件夹图标添加 ng-click 行为，当单击时，它会在 true/false 之间切换该参数。然后在 ng-repeat='item in mockData' 中，您必须使用 ng-show='item.showFolderContents' 创建一个嵌套的 ng-repeat='report in item.reports' 。

您可以使用如下方式处理 ng-click 行为:

<i class="glyphicon glyphicon-folder-close" ng-click='toggleShowingFolderContents(item)></i>

并在你的 Angular 中创建一个函数，例如:

$scope.toggleShowingFolderContents = function(item){
item.showFolderContents = !item.showFolderContents
}

所以你的 html 最终看起来像这样:

<div class="row" ng-repeat="item in mockData | filter:query">
<div class="col-md-6">
<a href="" class="list-group-item" ng-cloak >
  <i class="glyphicon glyphicon-folder-close" ng-  click='toggleShowingFolderContents(item)></i>
<div ng-show='item.showFolderContents'>
<div ng-repeat='report in item.reports'>
{{report.name}}
</div>
</div>