Bootstrap AngularJS如果没有li则隐藏ul

Question

如果#nawbar nav ul没有li或可见li，是否有方法使用ng-hide或ng-if（即在元素内部，而不是控制器内部）来隐藏它？

也许这也可以扩展为隐藏切换按钮，因为没有什么可显示的。

目前，如果没有列表项，那么你仍然可以切换（上下滑动）导航栏，它看起来不太好。

我看到的大多数其他问题都与重复有关

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav" id="navbar-nav">
        <li class="active hidden-xs">
          <a href="#">Home</a>
        </li>
        <li class="hidden-xs">
          <a href="#products">Products</a>
        </li>
        <li class="hidden-xs">
          <a href="#overview">Overview</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>

JSFiddle

Answer 1

这里有一些事情我们需要处理。首先，使用angular的全部原因是进行数据绑定以操作/填充视图。话虽如此，你需要有ng-if/ng-show/ng-hide的东西来检查。这就是控制器的作用所在。控制器必须包含信息，以便可以操纵视图。因此，在这种情况下，我们将希望创建一个控制器，它有一个变量来包含菜单列表项：

app.controller('navCtrl', function(){
  this.menuItems = [
    { name: 'Home', href: '' },
    { name: 'Products', href: '' },
    { name: 'Overview', href: '' }
  ];
});

现在完成了，我们需要将其绑定到导航：

<div ng-controller="navCtrl as nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> .... </div>

接下来，导航li项目需要有一个ng-repeat，以便您可以填充ul

<ul class="nav navbar-nav">
  <li ng-repeat="navItem in nav.menuItems">
    <a ng-href="{{ navItem.href }}">{{ navItem.name }}</a>
  </li>
</ul>

现在你可以开始做你要求的事情了。只需添加一个ng-if即可检查是否有导航项目：

<ul class="nav navbar-nav" ng-if="nav.menuItems.length > 0"> ... </ul>

您也可以在切换菜单上执行此操作：

<button ng-if="nav.menuItems.length > 0" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ... </button>

因此，现在如果控制器menuItems是空阵列this.menuItems = []，则不会创建ul和button。

这就引出了第二点。唯一有意义的方法是通过某种类型的service或和API调用填充菜单项，或者可以动态创建/删除导航项。如果你在控制器中对数组进行硬编码而不进行操作，那么你就知道这些值会存在，这是没有原因的。

我在这个实现中的最后一点是从li中删除class="hidden-xs"，因为根据这个实现，即使在视口为xs时导航项存在，它们也不会显示。

下面是一个检查完整实现的小提琴：http://jsfiddle.net/9shaakw9/2/

希望这能有所帮助！