Bootstrap 3 dropdown toggle menu not working when using with AngularJS UI Bootstrap

Question

I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.

Index.html

<ul class="nav nav-list">
                <li>
                    <a href="index.html">
                        <i class="icon-dashboard"></i>
                        <span class="menu-text"> Dashboard </span>
                    </a>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="icon-building"></i>
                        <span class="menu-text"> Projects </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu">
                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Find Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Create Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Update Project
                            </a>
                        </li>    

                    </ul>
                </li>
<ul>

Moboz · Accepted Answer · 2014-03-27 12:10:57Z

You need to do it the Angularjs way:

Make sure to include:

Index:

<ul class="nav nav-list">
    <li>
      <a href="index.html">
        <i class="icon-dashboard"></i>
        <span class="menu-text"> Dashboard </span>
      </a>
    </li>
    <li class="dropdown" ng-controller="DropdownCtrl">
      <a class="dropdown-toggle">
        <i class="icon-building"></i>
        <span class="menu-text"> Projects </span>
        <b class="arrow icon-angle-down"></b>
      </a>
        <ul class="dropdown-menu">
          <li ng-repeat="choice in items">
            <i class="icon-double-angle-right"></i>
            <a>{{choice}}</a>
          </li>
        </ul>
    </li>
<ul>

JS:

angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
  $scope.items = [
    "Find Project",
    "Create Project",
    "Update Project"
  ];
}

Collectives™ on Stack Overflow

Bootstrap 3 dropdown toggle menu not working when using with AngularJS UI Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related