Добавьте условие if else, чтобы закрыть и открыть элемент HTML внутри ng-repeat с помощью AngularJs

Я делаю динамическое меню, получая данные меню через API. успешно получили данные API и отобразили их в HTML. но моя проблема в том, что у меня есть сложная структура в моем Html. Мне нужно закрыть элемент UL после 4-го элемента ЛИ, и я не могу этого сделать.

Я попытался поместить тройное условие в свой 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-if.!!

— 14.03.2019 12:31

html angularjs

14.03.2019 09:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

173

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам было бы намного проще переместить ng-repeat в ul, чтобы позволить ng-repeat обрабатывать рендеринг группами по четыре, вместо того, чтобы пытаться вручную играть с открывающими и закрывающими тегами html. Вы можете попробовать что-то вроде следующего, чтобы добиться этого.

  $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>

Демо

Я рад, что смог помочь.

— 14.03.2019 14:15

14.03.2019 12:26