Clever Geek Handbook

Applying Angular Bootstrap Removal Example

I want to bring a project to the project, and I gave the code from the example. The dropdown menu appears as in the example, but when I click on it, nothing happens.

<form class="form" name="form"  novalidate>
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            dropdown-toggle
            ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <div>
</form>

Now the controller for this html:

angular.module('startupApp').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;
    };
});
+3


source to share


4 answers


After a lot of struggle, I only found an answer that worked for my case. I needed to add parse-angular to my angular.module ('myapp' ['parse-angular']).



0


source


I had the same problem and solved it by removing the line dropdown-toggle

I don't know what the problem is, but it works so well

Here's what I did: This is the original example:

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

and this is the code without dropdown

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>


Edit:

The above example works if you are using angular-ui-bootstrap Version: 0.10.0

I have now modified the ui-bootstrap using this

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

And now everyone works like a charm

+8


source


There are several problems with the code:

Your HTML is not valid, the last tag <div>

should not be

<form class="form" name="form" novalidate>
    <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                dropdown-toggle
                ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</form>

You have not referred to ui.bootstrap

as a module dependency

angular.module('startupApp', [
    'ui.bootstrap'
])

Have you included the files you want?

  • AngularJS
  • Angular UT Bootstrap
  • Loading CSS

You don't need anything special in your controller, directives dropdown

and dropdown-toggle

are self-contained.

JsFiddle Demo

+4


source


First, I want to thank Jorge Casariego for his answer . His answer helped me get a lot more.

There was one problem at the end: neither $scope.toggled = function(open) {...}

, nor $scope.toggleDropdown = function($event) {...}

where is it called when someone interacted with Dropdown ( see example of them here ). After examining ui-bootstrap-tpls-0.10.0.js , I had to tweak the html code further:

  • the attribute dropdown

    must be a class value, not the attribute itself.
  • is-open=...

    not required, ui-bootstrap will take care of that
  • attach ng-click

    to an item <a>

    in the list.

This didn't work for me ( dropdown

as an attribute ):

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

But it was ( add dropdown

as class value ):

<!-- Single button -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

The rest of my Angular app looks like this:

$scope.toggleDropdown = function($event) {
  $event.preventDefault();
  console.log('This is your event now: ', $event);
};

I know there are newer versions of angular-ui-bootstrap , but for the record I put here. It works with version 0.10.0 .

0


source






More articles:


All Articles