CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user1199272
user1199272

Reputation:

UI bootstrap dropdown not working

I am using UI Bootstrap drop down and below is my code:

HTML:

 <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <link href="content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="dropdown.js"></script>

 <div class="btn-group" uib-dropdown>
        <button id="split-button" type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger" uib-dropdown-toggle>
            <span class="caret"></span>
            <span class="sr-only">Split button!</span>
        </button>
        <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>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
    </div>

.js file:

var app = angular.module("app", ["ui.router"]);

app.controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
      'The first choice!',
      'And another choice for you.',
      'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function (open) {
        $log.log('Dropdown is now: ', open);
    };

    $scope.toggleDropdown = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };

    $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});

Dropdown is visible but dropdown items are coming outside as list item even before I click dropdown. Even if I click dropdown nothing happens. Is it CSS issue. Did I miss to link any file?

Upvotes: 0

Views: 3527

Answers (1)

kensplanet
kensplanet

Reputation: 494

The causes are,

  • ng-app="app" may be missing in your HTML file.
  • DropDownCtrl is not used in your HTML, though its defined in dropdown.js file.
  • The module ui.bootstrap is not used in your JS file.
  • ui.router is an invalid module.

The modified working files,

Working Plunkr

http://plnkr.co/edit/TiQrBx9yiU0lTjHhvWRp?p=preview

HTML file 

<html ng-app="app">

    <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
    <script src="dropdown.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div ng-controller="DropdownCtrl">
     <div class="btn-group" uib-dropdown>
          <button id="split-button" type="button" class="btn btn-danger">Action</button>
          <button type="button" class="btn btn-danger" uib-dropdown-toggle>
              <span class="caret"></span>
              <span class="sr-only">Split button!</span>
          </button>
          <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>
              <li role="menuitem"><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li role="menuitem"><a href="#">Separated link</a></li>
          </ul>
      </div>
    </div>
  </body>

</html>

JS file

var app = angular.module("app", ['ui.bootstrap']);

app.controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
      'The first choice!',
      'And another choice for you.',
      'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function (open) {
        $log.log('Dropdown is now: ', open);
    };

    $scope.toggleDropdown = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };

    $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});

Upvotes: 2

Related Questions