如果 #navbar-nav ul 没有 li 或可见 li,有没有办法使用 ng-hide 或 ng-if(即在元素内部,而不是 Controller 内部)来隐藏它?
也许这可以扩展为隐藏切换按钮,因为没有什么可显示的。
目前如果没有列表项,那么你仍然可以切换(上下滑动)导航栏,它看起来不太好。
我看到的大多数其他问题都与 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>
最佳答案
这里有几件事我们需要谈一谈。首先是您使用 Angular 全部原因是进行数据绑定(bind)以操作/填充 View 。话虽如此,您需要为 ng-if
准备一些东西/ng-show
/ng-hide
检查反对。这就是 Controller 的用武之地。 Controller 必须包含信息,以便可以操作 View 。所以在这种情况下,我们将要创建一个 Controller ,它有一个变量来包含菜单列表项:
app.controller('navCtrl', function(){
this.menuItems = [
{ name: 'Home', href: '' },
{ name: 'Products', href: '' },
{ name: 'Overview', href: '' }
];
});
现在这已经完成了,我们需要将它绑定(bind)到导航:
<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>
所以现在如果 Controller menuItems
是一个空数组 this.menuItems = []
ul
和 button
不会被创建。
这让我想到了第 2 点。唯一有意义的方法是通过 service
填充菜单项。或某种类型的 API 调用,或者您是否可以动态创建/删除导航项。如果您在 Controller 中对数组进行硬编码而不对其进行操作,那么您就知道这些值将存在并且没有理由这样做。
我在此实现中的最后一点是删除 class="hidden-xs"
来自 li
根据此实现,即使在视口(viewport)为 xs
时存在导航项,它们也不会显示。 .
这是检查完整实现的 fiddle : http://jsfiddle.net/9shaakw9/2/
希望这对您有所帮助!
关于html - Bootstrap AngularJS 如果没有 li 则隐藏 ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36231350/