bootstrap angular collapse菜单与主菜单不同

时间:2015-12-28 03:10:00

标签: javascript angularjs twitter-bootstrap

好的,所以我的标题很糟糕,但是我需要帮助才能使我的折叠(移动)导航与非折叠(桌面)菜单不同。

我希望折叠(移动)菜单能够使用subject数组而不是html中的内容。

非常感谢任何帮助。

这是我的HTML代码:

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="NavbarCtrl">
    <div class="navbar-header">
      <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="tester collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
      <ul class="nav navbar-nav navbar-left topmenu-left">
        <li ng-repeat="a in subjects"><a href="#">{{a}}</a><li>
      </ul>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left topmenu-left">
       <li><a ui-sref="home">Home</a></li>
       <li><a ui-sref="about">About</a></li>
       <li><a ui-sref="team">Team</a></li>
       <li><a ui-sref="contact">Contacts</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right topmenu-right">
       <li><a ui-sref="home">Search Bar</a></li>
       <li><a ui-sref="home">Sign In</a></li>
      </ul>
    </div>

这是我的控制器:

.controller('NavbarCtrl', function ($scope, $location, $stateParams, $state)
{
  $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
});

0 个答案:

没有答案