用ng重复最小化菜单

Question

我知道问题标题有点模糊，但我不知道该怎么称呼它。基本上，这就是我的问题：

我有一个带子菜单的角度菜单。我把每个菜单项都分开，并用ng重复注入子菜单项。这很好，但问题是我想在一个ng重复中运行整个菜单，并保留json文件，不仅是子菜单项，还有菜单项。这就是我所拥有的：

<div class="cnt">
<div class="menu-item" ng-click="toggle(1); open1=!open1">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
<span class="title flex" flex=""> Menu Item</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open1, 'rotate-back': !open1}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
<div class="menu-item" ng-click="toggle(2); open2=!open2">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
<span class="title flex" flex=""> Menu Item 2</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open2, 'rotate-back': !open2}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>  

使用如下json文件：

$scope.data = 
[{
title: 'Home',
icon: 'home',
link: '/page1/'
}, {
title: 'Email Us',
icon: 'envelope',
link: '/page2/'
}, {
title: 'Profile',
icon: 'user',
link: '/page3/'
}, {
title: 'Print',
icon: 'print',
link: '/page4/'
}];
$scope.data2 = 
[{
title: 'Home 2',
icon: 'home',
link: '/page1/'
}, {
title: 'Email Us 2',
icon: 'envelope',
link: '/page2/'
}, {
title: 'Profile 2',
icon: 'user',
link: '/page3/'
}, {
title: 'Print 2',
icon: 'print',
link: '/page4/'
}];

正如您所看到的，如果我想要2个菜单项，我必须为2个菜单项目构建代码，将数据添加到json中，并运行绑定。如果我想要3次，那么我必须做3次。但如果我想要20呢？理想情况下，我希望有一个单一的HTML结构，从json中提取数据，以创建尽可能多的菜单项和在json中找到的子菜单项。但我在尝试实现这一点时遇到了问题：

这在我的脑海中是有意义的：

<div class="cnt" ng-repeat="item in data">
<div class="menu-item" ng-click="toggle({{item.pos}}); open{{item.pos}}=!open{{item.pos}}">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open{{item.pos}}, 'rotate-back': !open{{item.pos}}}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen==={{item.pos}}" >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.item1[0].linkto}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.item1[0].title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>  

我有一个CODEPEN，你可以在中看到它的工作代码

有关所需效果，请参阅此CODEPEN。这就是我现在让它工作的方式，以及它最终应该如何工作。

谢谢各位！

Answer 1

这个答案不是直接解决解析问题，而是解决您试图实现的目标。与其使用open{{item.pos}}来识别会导致解析错误的菜单项，不如使用menuIsOpen来保持切换项的位置。基于预期效果。。代码笔样本

脚本添加

//Not needed
// $scope.open1 = false; //initial value
//$scope.open2 = false; //initial value
//$scope.open3 = false; //initial value
//$scope.open4 = false; //initial value
$scope.toggle = function(itemPos) {
if ($scope.menuIsOpen === itemPos) {
$scope.menuIsOpen = 0; 
}
else {
$scope.menuIsOpen = itemPos;  
}
}

html：只需要切换item我们就可以通过位置属性

<div class="cnt" ng-repeat="item in data">
<div class="menu-item" ng-click="toggle(item.pos);">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i>
</md-list>

<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===item.pos" >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.item1[0].linkto}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.item1[0].title}} a</p>
</a>
</div>
</md-button>
</md-menu-item>
</div> 
</div>
</div>

让我们知道

---

更新：根据您的评论，当前设置仅处理0位置的项目(仅1个项目)。JSON(如果您没有控制权)和您需要item1 item2等。要显示，您可以通过遍历整个对象并仅迭代ARRAYS来扩展ng repeat。这不是最佳解决方案，只是一个变通办法。。有点。。

如果数组内有另一个链接数组。。这个解决方案将不起作用。

html

<div class="sub-menu" ng-animate="'animate'" >
<div ng-repeat='(k,v) in item track by $index'>
<div ng-if="isArray(v)">
<md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>                        
<md-button>
<div layout="row" flex="">
<a ui-sref="{{v1.linkto}}">
<p flex=""><i class="fa fa-{{v1.icon}}"></i> {{v1.title}}</p>
</a>
</div>
</md-button>    
</md-menu-item>
</div>
</div>              
</div> 

脚本

$scope.isArray = function(val) {
return Array.isArray(val);
}