Блог

Я пытаюсь создать меню, в котором только некоторые пункты меню будут иметь подменю. Я использую ng-repeat и ui-router. Например, это сокращенный набор пунктов главного меню:

     vm.routes = [
        { name: 'Home', path: 'home' },
        { name: 'Streams', path: 'streams' },
        { name: 'Overlays', path: 'overlays' },
        { name: 'Admin', path: 'admin' }
    ];
 

В HTML я использую это:

     <li class="vic-menu-item" 
        ng-repeat="route in vm.routes" 
        <a ui-sref="{{route.path}}">{{route.name}}</a>
    </li>
 

Теперь я хочу добавить подменю в меню администратора. Но другие пункты меню могут не иметь подменю, например, Home. Таким образом, его включение должно быть обусловлено некоторым свойством в моем массиве vm.routes.

Вопрос: используя угловой способ, как мне использовать условные обозначения в ng-repeat, чтобы я мог создать тег ul меню с дополнительными пунктами подменю?

Я рассмотрел некоторые из подобных вопросов, но они сбивают меня с толку, и ни один из них, похоже, не отвечает на этот конкретный метод.

Спасибо, -Андрес

Прежде всего, вы должны создать массив с одинаковой структурой

 vm.routes = [
        { name: 'Home', path: 'home', submenu:[
         {name: 'Submenu-1', path: ''},
         {name: 'Submenu-2', path: ''}
        ] },
        { name: 'Streams', path: 'streams' },
        { name: 'Overlays', path: 'overlays' },
        { name: 'Admin', path: 'admin' }
    ];
 

После этого в html:

 <li class="vic-menu-item" 
    ng-repeat="route in vm.routes" 
    <a ui-sref="{{route.path}}">{{route.name}}</a>
    <ul ng-if='route.submenu'>
      <li ng-repeat='submenu in route.submenu'>
         <a ui-sref="{{submenu.path}}">{{submenu.name}}</a>
      </li>
    </ul>
</li>