我正在通过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

10-05 20:40
查看更多