I am receiving a JSON object in my view that looks like this:
$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" }]
}
];
In order to loop through the folder list, I have included the following code snippet in my 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>
{{item.folder}}
</a>
</div>
</div>
Now, I want to add a functionality where clicking on the folder name opens up a new div displaying the items in that folder. The structure of the new div should be similar to:
"reports": [{ "name": "report1" }, { "name": "report2" }, { "name": "report3" }
How can I achieve this?