Question

有没有办法使用ng-hide或ng-if（即在元素内部，而不是控制器中）隐藏＃navbar-nav ul，如果它没有li或可见的li？

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

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

我看到的大多数其他问题都与ng-repeat

有关

<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: '' }
  ];
});

现在我们需要将它绑定到nav：

<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将不会被创建。

这引导我指出＃2。唯一有意义的方法是，如果您通过某种service或API调用填充菜单项，或者您可以动态创建/删除导航项。如果您在控制器中对阵列进行硬编码而不对其进行操作，那么您就知道这些值将存在并且没有理由这样做。

我在此实现中的最后一点是从class="hidden-xs"移除li按照此实现，即使视口为xs时，导航项也不会显示

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

希望这有帮助！

Bootstrap AngularJS如果没有li，则隐藏ul

1 个答案: