我正在通过API获取菜单数据来制作一个动态菜单。已成功获取API数据并以Html格式呈现。但我的问题是我的Html中有一些具有挑战性的结构。我需要在第四个LI元素之后关闭UL元素,但我无法完成。
我试图将三元条件放在ng repeat中,条件正在工作,但我不能将Html元素放在</ul><ul>
内部条件中。
这是我的HTML:
<nav id="topMenu">
<ul>
<li class="tl_dd" data-ng-repeat="headerMenu in headerMenu">
<a href="{{headerMenu.url != ''?headerMenu.url:'javascript:;'}}" >{{headerMenu.menu_title}}</a>
<div class="dd clear">
<ul>
<li data-ng-repeat="submenu in headerMenu.submenu">
<a href="{{submenu.url}}">{{submenu.title}}</a>
<!--Need to close ul here after every 4th li element-->
</li>
</ul>
</div>
</li>
</ul>
</nav>
最佳答案
我认为,将ng repeat移动到ul,让ng repeat处理四个组的呈现,而不是手动尝试打开和关闭html标记,会容易得多。你可以尝试下面的方法来达到这个目的。
js公司
$scope.getNumber = function(data,numberOfItems) {
if(data.length % numberOfItems === 0)
return new Array(data.length / numberOfItems);
else
return new Array(Math.floor(data.length/numberOfItems) + 1);
}
$scope.getData = function(data,index,numberOfItems){
var temp = data;
return temp.slice(index * numberOfItems,index * numberOfItems + numberOfItems);
}
html格式
<div class="dd clear">
<ul ng-repeat="item in getNumber(data,4) track by $index">
<li data-ng-repeat="name in getData(data,$index,4)">
{{name}}
</li>
</ul>
</div>
Demo