Menu
I simply created a second dropdown by copying and pasting the official Angular UI Bootrstrap Dropdown sample and now neither one pulls down the menu. See plunker at
http://plnkr.co/edit/Xpp4sBSOoCK2lNZN3ZrL?p=preview
<!-- Single button 1-->
<div class="btn-group" dropdown is-open="status.isopen">
<button id="btn1" 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>
<!-- Single button 2-->
<div class="btn-group" dropdown is-open="status.isopen">
<button id="btn2" type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown1 <span class="caret"></span>
</button>
<ul id="list2" 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>
588
Why dropdown link is not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle=”dropdown” to toggle the dropdown.
You have to make sure that popper. js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4. Save this answer.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
You need 2 separate variables for the is-open attribute, working plunk here
Code changed:
$scope.status = {
isopen1: false,
isopen2: false
};
<div class="btn-group" dropdown is-open="status.isopen1">
<div class="btn-group" dropdown is-open="status.isopen2">
It's worth mentioning using the is-open attribute is not necessary. You will notice if you remove the is-open attribute with the bindings the dropdowns will work.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
