How to have bootstrap dropdown in angular?

Question

I have a bootstrap dropdown with checkboxes. I want to use this in Angular.

http://codepen.io/bseth99/pen/fboKH (i dont use any of the javascript in there and I wrap the dropdown in a form)

<form>
    <div class="container" ng-controller="HomepageController">
      <div class="row">
           <div class="col-lg-12">
         <div class="button-group">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" ng-click="callMe()" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
      <li><a href="#" ng-click="callMe()" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
      <li><a href="#" ng-click="callMe()" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
    </ul>
      </div>
    </div>
      </div>
    </div>
</form>

Inside HomepageController:

$scope.callMe = function (event){
 event.preventDefault();
return false;
}

I notice that whenever I click on an option or anywhere in the checkbox, it redirects and refreshes the page to go to /#. I tried putting an ng-click on the "a" tag such that it calls a function in a controller that has "return false", no luck. Page still redirects. How do I prevent the page from redirecting and output the "option" that is checked?

The issue is......

I want the checking of a box to trigger an event.
Checkboxes don't appear to actually check when I click on the checkbox.
Want to make sure I can check multiple boxes without the dropdown closing itself after clicking on any individual option.

Use angular-ui-bootstrap instead of standard bootstrap with jquery. See here — Tom
– Tom, Commented Jun 23, 2015 at 20:28
Also, stackoverflow.com/questions/10931315/…. If that's not working, something else is awry. — isherwood
– isherwood, Commented Jun 23, 2015 at 20:30
I suppose the right question to ask is why you have anchors around inputs. That just seems wrong. — isherwood
– isherwood, Commented Jun 23, 2015 at 20:31
I have anchors because I want an ng-click event to detect when a box is checked so I can maintain a list of "checked" checkboxes. If there is another way to do it.. — Rolando
– Rolando, Commented Jun 23, 2015 at 20:34

mikeswright49 · Accepted Answer · 2015-06-23 20:28:18Z

1

Use

<a href="javascript:void(0)" ....>

it's essentially a no-op and will cause no navigation.

answered Jun 23, 2015 at 20:28

mikeswright49

3,41622 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to have bootstrap dropdown in angular?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related