代码之家 › 专栏 › 技术社区 › Ali

引导AngularJS如果没有li则隐藏ul

ng-hide angular-ng-if angularjs css html

Ali · 技术社区 · 8 年前

如果没有li或可见li,是否有方法使用nghide或ngif(即在元素内部,而不是控制器内部)隐藏#navbar导航ul?

也许这可以扩展为隐藏切换按钮,因为没有任何可显示的内容。

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

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

<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

1 回复 | 直到 8 年前

Justin Ober 8 年前

这里有几件事我们需要谈谈。第一个原因是,使用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如果 检查是否有导航项:

<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 = [] 这个 用户界面 以及 button 将不会创建。

这就引出了第2点。唯一有意义的方法是,如果您通过 service 或者某种类型的API调用,或者您可以动态创建/删除导航项。如果在控制器中对数组进行硬编码,而不是对其进行操作,那么您就知道这些值将存在,并且没有理由这样做。

我在这个实现中的最后一点是删除 class="hidden-xs" 来自 锂 根据这个实现,即使在视口打开时,导航项也不会显示 xs .

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

希望这有帮助!