angularjs - 在不均匀深度的数据上嵌套 ng-repeat

Question

在 Angular js 中，我试图通过控制器构建我的站点导航。在导航菜单中，有些菜单有子菜单，有些没有。这是我的导航控制器的简化版本。

function NavCtrl($scope) {
  $scope.menus = [
    {"name": "Destinations",
     "url": "/#/destinations",
    "submenu":[
    {
      "name":"America",
      "url":"#"
    },
    {
      "name":"Europe",
      "url":"#"
    }
    ]},
    {"name": "Friend Finder",
     "url": "/#/friend-finder"},
    {"name": "Blog",
     "url": "/#/blog"},
  ];
}

这是我用来输出它的代码：

<ul class="nav" ng-controller="NavCtrl">
      <li ng-repeat="menu in menus">
        <a href="{{menu.url}}">
          {{menu.name}}
        </a>
        <ul>
          <li ng-repeat="submenu in menu.submenu">
            <a href="{{submenu.url}}">
            {{submenu.name}}
            </a>
          </li>
        </ul>
      </li>
    </ul>

如果菜单没有子菜单，我是否有办法不输出内部 ul？

Answer 1

我还没有测试过，但是，我相信你不能通过在你的 inner中添加类似的东西来显示你ul是否没有（这就是你想要的对吗？） 。menu.submenudata-ng-show="menu.submenu"ul

像这样：

<ul class="nav" ng-controller="NavCtrl">
  <li ng-repeat="menu in menus">
    <a href="{{menu.url}}">
      {{menu.name}}
    </a>
    <ul data-ng-show="menu.submenu">
      <li ng-repeat="submenu in menu.submenu">
        <a href="{{submenu.url}}">
        {{submenu.name}}
        </a>
      </li>
    </ul>
  </li>
</ul>

也许您需要更好的测试，或者设置submenu为 false，因为我不确定空数组或对象的行为是否符合我的预期，但我很确定这是一般的想法。