I am trying to Disable the Bootstrap dropdown by setting data-toggle="" which is not working .The ul has lis ng-repeating on one array and if that array is empty i am setting data-toggle="" to not open the empty li.But this is not working it is still opening an empty list as given below.
Here is the template. you can see at <button> that the data-toggle is empty not dropdown.Still it opens the list.
<div name="originFilter" id="originFilter" class="dropdown pa-leftFilter-dropdown-div open">
<button id="selectBrand" class=" btn btn-default dropdown-toggle" type="button" disabledropdown="" disable="brands" data-toggle="" aria-expanded="true">
<span id="selectedBrand" class="pa-text-wrapper-ellipsis pa-filter-selected-span ng-binding" ng-attr-title="{{selectedProperties.brand}}" title="LISTERMINT">BEBE</span><span class="caret"></span>
</button>
<ul class="dropdown-menu pa-filter-dropdown" role="menu" aria-labelledby="OriginDropDown">
<!-- ngRepeat: brand in brands -->
</ul>
</div>
Use ng-disabled true/false for making dropdown enable/disable
Related
I got a wrapper that stops event propagation because of other things happening in and with that wrapper. In that wrapper I got several directives with UI Bootstrap dropdowns.
The problem is, that these dropdowns doesn't close on any click. Only by clicking another dropdown.
It seems that UI Bootstrap Dropdown watches click on body or something to close all dropdowns.
<div class="wrapper" ng-click="$event.stopPropagation()" style="width: 100%; height: 300px; background:grey;">
<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 class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
https://plnkr.co/edit/bHHrpipM4MlxLNfOE2pt?p=preview
Any ideas to solve this?
Thanks for your help!
According to source code the event handler for closing of dropdown element is getting attached to window.document element:
$document.on('click', closeDropdown);
but at the same time $event.stopPropagation() method prevents click event from being executed.
If you want dropdown to trigger events in this scenario then you could bind click event to dropdown that basically triggers document element click event:
$scope.dropDownClick = function($event) {
angular.element(document).triggerHandler('click');
};
Dropdown element
<ul class="dropdown-menu" ng-click="dropDownClick($event)" uib-dropdown-menu role="menu" aria-labelledby="split-button">
...
</ul>
Forked plunker
A workaround you could use is shown at this working plnkr.
You need to stop wrapper's propagation and use a variable to toggle dropdown's is-open attribute.
I am unable to use up and down arrow buttons to focus on the drop down menu.
In my application, we are using angularjs.
Here is my code:
<div class="dropdown dropdown-eq2 form-group" dropdown>
<button class="btn dropdown-toggle" dropdown-toggle data-toggle="dropdown">
<span class="icon-e_icon_expand pull-right" style="margin-left: 5px;"> </span>{{personObj.type}}
</button>
<ul class="dropdown-menu num-of-views" role="menu" dropdown-menu>
<li role="presentation" ng-repeat="type in categoryArray">
<a role="menuitem" tabindex="-1" href="" ng-click="setSelectedType(type)"> {{type}}</a>
</li>
</ul>
</div>
Angular UI dropdown don't support UP/DOWN keyboard navigation's.
You can build custom directive on top of this will full fill your requirement.
You can refer this link Navigate the UI using keyboard
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
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><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</li>
<li><input type="checkbox"/> Option 3</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
<a href="javascript:void(0)" ....>
it's essentially a no-op and will cause no navigation.
I have a list of buttons built in an ng-repeat loop. I want a drop down menu to be shared with them all.
The menu would have to understand the context / underlying object within the button, so that any action applied from the menu only affects that record.
I've been trying to follow through some bootstrap examples here:
http://angular-ui.github.io/bootstrap/
However once I have more than one menu, neither of the menus load, seen in this Plunker:
http://plnkr.co/edit/SIfEw0lxwen8YDAVKDfA?p=preview
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- 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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!-- Second button -->
<div id="hello" 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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</body>
</html>
I also can't get my head around how to make the menu a re-usable object given that it has to dynamically apply actions to whichever button is clicked.
I tried fiddling with your plunkr.
Please see this.
http://plnkr.co/edit/zhzpIoIgoaxUkjEbAQuT?p=preview
According to the docs,
You can either use is-open to toggle or add inside a element to toggle it when is clicked.I think the issue was with you using both isopen and dropdown toggle directive.Also regarding making the menu a reusable component,we would go for making the menu a custom directive which can accept a two way bound array scope variable as input for its menu items
So it would be like this
<div class="btn-group" ng-repeat ="button in buttons">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{button.name}}<span class="caret"></span>
</button>
<menu items-array="button.menuitems"></menu>
</div>