angularjs 带有Angular 用户界面引导的响应式下拉导航栏(以正确的Angular 方式完成)

cqoc49vn 于 2022-12-28 发布在 Angular

关注(0)|答案(4)|浏览(343)

我使用angular-ui-bootstrap的模块"ui. bootstrap. dropdownToggle"创建了一个带有下拉导航栏的JSFiddle：* * 一个

<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>

据我所知，这是实现这样一个下拉菜单的正确的、有Angular 的方式，就angularjs而言，"错误的"方式是包含bootstrap.js并使用"data-toggle =" dropdown ......我说得对吗？
现在，我想添加响应行为到我的导航栏中，如在以下Fiddle中所做的：http://jsfiddle.net/ghtC9/6/
但是，有一些我不喜欢上面的解决方案。该家伙包括bootstrap。js!
那么，什么是正确的Angular 种方式来添加响应行为到我现有的导航栏？
我显然需要使用引导响应导航栏类，如"nav-collapse navbar-responsive-collapse"。但我不知道如何...
我真的很感激你的帮助!
先谢谢你!迈克尔

angularjs

来源：https://stackoverflow.com/questions/16268606/responsive-dropdown-navbar-with-angular-ui-bootstrap-done-in-the-correct-angula

4条答案

按热度按时间

lfapxunr1#

更新2015-06

根据antoinepairet的评论/示例：
使用uib-collapse属性提供动画：http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <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" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

古老的...
我看到这个问题是围绕BS 2提出的，但我认为我应该根据ui.bootstrap issue 394中的建议，使用ng-class解决方案来解决Bootstrap 3：
与官方bootstrap示例的唯一不同之处是添加了ng-属性，并在下面的注解中注明：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <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>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
  
    <ul class="nav navbar-nav">
    ...

以下是更新后的工作示例：http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview（帽尖拉尔斯）
在简单的用例中，这似乎对我很有效，但是您会注意到，在示例中，第二个下拉菜单被切断了。

赞(0）回复(0）举报 2022-12-28

dxxyhpgq2#

您可以使用“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
变更：collapse变更为uib-collapse。

赞(0）回复(0）举报 2022-12-28

idfiyjo83#

不知道是否有人有同样的响应问题，但它只是一个简单的css解决方案对我来说。
相同示例

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

与

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

赞(0）回复(0）举报 2022-12-28

ars1skjm4#

我的解决方案的响应/下拉导航栏与Angular -用户界面引导（当更新到Angular 1.5和用户界面引导1.2.1）
第一个月

...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

赞(0）回复(0）举报 2022-12-28

我来回答

angularjs 带有Angular 用户界面引导的响应式下拉导航栏(以正确的Angular 方式完成)

4条答案

更新2015-06

相关问题

热门标签

最新问答