angularjs – 响应的下拉导航栏与angular-ui引导(做正确的角种类

发布时间：2020-12-17 09:08:55 所属栏目：安全来源：网络整理

导读：我创建了一个JSFiddle与下拉导航栏使用angular-ui-boostrap的模块“ui.bootstrap.dropdownToggle”： http://jsfiddle.net/mhu23/2pmz5/ div class="navbar navbar-fixed-top"div class="navbar-inner" div class="container" a class="brand" href="#" My R

我创建了一个JSFiddle与下拉导航栏使用angular-ui-boostrap的模块“ui.bootstrap.dropdownToggle”： http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

据我所知，这是正确的，有角度的方式来实现这样的下拉菜单。 “错误”的方式，在angularjs，将包括bootstrap.js和使用“data-toggle =”下拉“…我在这里吗？

现在我想添加响应行为到我的导航栏，如下面的小提琴：
http://jsfiddle.net/ghtC9/6/

但是，有一些我不喜欢上述解决方案。这个家伙包括bootstrap.js！

那么，什么是正确的角度类型的方式来添加响应行为我现有的导航栏？

我显然需要使用引导响应navbar类，如“nav-collapse collapse navbar-responsive-collapse”。但我不知道如何…

我非常感谢您的帮助！

先谢谢你！
迈克尔

你可以使用“collapse”指令： http://jsfiddle.net/iscrow/Es4L3/
(检查HTML中的两个“注”)。

<!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

也就是说，您需要将折叠状态存储在变量中，并通过(简单地)更改该变量的值来更改折叠状态。

版本0.14向组件添加了一个uib-前缀：

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

更改：折叠到uib-collapse。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!