Question

我正在尝试构建一个菜单，其中只有一些菜单项会有子菜单。我正在使用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>

现在我想在Admin菜单中添加子菜单。但是其他菜单项可能没有子菜单，例如Home。所以它的包含必须以我的vm.routes数组中的某些属性为条件。

问题：使用Angular方式，如何在ng-repeat中使用条件，以便我可以使用可选的子菜单项构建菜单ul标签？

我已经看过一些类似的问题，但它们让我感到困惑，似乎没有人回答这个具体的技巧。

谢谢， -Andres

Answer 1

首先，你应该创建具有相同结构的数组

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>

如何在角度中使用ng-repeat和ui-router获取条件子菜单？

1 个答案: