Question

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

Answer 1

我认为，将ng-repeat移至ul，让ng-repeat以4组为一组处理渲染，而不是手动尝试打开和关闭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

添加其他条件以使用AngularJs在ng-repeat中关闭和打开HTML元素

1 个答案: