I want to use the bootstrap dropdown from the angular ui lib.
I'm getting an issue when I append the dropdown to another DOM element with dropdown-append-to (even dropdown-append-to-body is not working).
I can't have it working only when I use is-open with ng-click to trigger the dropdown.
I reproduced the issue in this plunker.
I'm using bootstrap 3.3.6, angular ui 2.1.3 and angular 1.5.8.
Hope somebody can help me.
You should work with uib-dropdown-toggle and also add an ng-click and toggle test at your controller
Also, dropdown-append-to-body should accept a value (default is false), like so dropdown-append-to-body="true"
<div class="btn-group" uib-dropdown dropdown-append-to-body="true" is-open="test">
<button type="button" ng-click="onClick(test)" class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<!-- list items -->
</ul>
</div>
exmaple plunk
Related
I'm learning Angular JS.
I have my angularjs component whose HTML template consists of Bootstrap's Dropdown component plus a message <div>:
<div class="dropdown-container">
<div id="messageDiv"></div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
This is straight from Bootstrap: http://getbootstrap.com/components/#dropdowns
I would like my #messageDiv to have text "Dropdown is open" when the dropdown is open and "Dropdown is closed" when dropdown is closed. How can I achieve this "the Angular way"?
I strongly recommend you to not reinvent the wheel and use the Angular UI Bootstrap.There you can find the dropdown directive. Then u can manage state of the dropdown directive using isOpen property binding and show/hide #messageDiv based on that property.
You can track if the dropdown opens and closes with events. Bootstrap provides a javascript file that you need to include and it also requires jquery. I made a working Plunker here: https://plnkr.co/edit/pE7bMI?p=preview
Once you include jquery, and bootstrap's js file you can track the events like this:
$scope.dropdownOpen = false;
// get a reference to your dropdown parent (in your case the <div class="dropdown>" line)
var dropdown = angular.element('#myDropdown');
dropdown.on('show.bs.dropdown', function(event) {
$scope.dropdownOpen = true;
$scope.$evalAsync();
});
dropdown.on('hide.bs.dropdown', function(event) {
$scope.dropdownOpen = false;
$scope.$evalAsync();
});
Why is $scope.evalAsync() in there?
Since angular.element is an alias for jqlite or jquery we are actually binding outside of angular. It doesn't know about the change so we need to tell the scope that something has changed.
I need to create custom styling for a select dropdown (including the options). The more I've dug into this, the more I've realized that styling options is quite difficult.
I'm currently using Bootstrap's dropdown and it works great, except for the fact that I have to use a function to assign a value.
This is how I am currently using a 'custom select dropdown':
<div class="form-element-container">
<div class="drop-down dropdown-toggle">
<label for="chooseAdvisor"></label>
<div>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{{mySelection}}</button>
<ul class="dropdown-menu">
<li ng-repeat="option in options">{{option}}</li>
</ul>
</div>
</div>
</div>
You can see that on click, I have to manually set the option in my controller rather than it being directly bound to my model. Is there any way that I can use Bootstrap's dropdown styling with angular's select tag?
I would love to be able to use my options repeater with 'track by', etc:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can try it:
https://angular-ui.github.io/bootstrap/#/dropdown
Just a suggestion, I've not tested it yet.
Update answer:
I think you can instead of angular module : acute-select
https://github.com/john-oc/acute-select
Demo : http://john-oc.github.io/
I am trying to insert a dropdown menu into a column in ui-grid. Each menu item will have an ng-click attached.
I am using ui-grid-unstable.min.js because pagination doesn't seem to work in ui-grid-stable.min.js
The button appears in the grid and registers that it has been clicked on (the open class is added to it) but it doesn't dropdown.
My ui-grid columndef look like this:
this.gridOptions.columnDefs = [
{ field: 'Foo', displayName: 'Actions', cellTemplate: '/app/quiz/action.html', sortable: false }
];
The cellTemplate code comes from the "Dropdown on Body" button example https://angular-ui.github.io/bootstrap/
It looks like this:
<div class="btn-group" dropdown dropdown-append-to-body>
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
Dropdown on Body <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>
ui.bootstrap is included in my app module and the .css and .js files are included in my index.html
I looked at this: Angular UI Grid: How to create a pre-populated dropdown menu for column filtering and some others but they seem to deal with creating bound selects (not a drop-down menu) and searched other similar items on stack overflow but I cannot find one that solves my problem of the button menu not even dropping down.
Further research shows it was because the class on the ui-grid cell is overflow hidden. By adding a class with overflow:visible the columnDef for the cell I was able to resolve the issue.
Adding dropdown-append-to-body near the uib-dropdown or dropdown directive helps with overflow:hidden problem. Also inside the ui-grid cell.
<div class="btn-group" uib-dropdown dropdown-append-to-body>
...
</div>
We've got the following HTML:
<div class="btn-group search-dropdown" dropdown is-open="gender.isopen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
{{sex_temp=='F'?'Female':'Male'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-class="{'dropdown-selected':sex_temp=='F'}">
<a ng-click="sex_temp='F'">Female</a>
</li>
<li ng-class="{'dropdown-selected':sex_temp=='M'}">
<a ng-click="sex_temp='M'">Male</a>
</li>
</ul>
</div>
In the console, we're getting the following error:
Error: setIsOpen is not a function #http://127.0.0.1/lib/bootstrap-ui/ui-bootstrap-tpls-0.12.1.js:1734:5
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12406:23
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1 #debugger eval code:1:1
consoleLog/<#http://127.0.0.1/lib/AngularJS/angular.js:10062:18
$ExceptionHandlerProvider/this.$get</<#http://127.0.0.1/lib/AngularJS/angular.js:7363:7
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://127.0.0.1/lib/AngularJS/angular.js:12426:19
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://127.0.0.1/lib/AngularJS/angular.js:12679:13
done#http://127.0.0.1/lib/AngularJS/angular.js:8279:34
completeRequest#http://127.0.0.1/lib/AngularJS/angular.js:8484:7
createHttpBackend/</xhr.onreadystatechange#http://127.0.0.1/lib/AngularJS/angular.js:8423:1
We're using ui-bootstrap-tpls-0.12.1.js
I have tried adding $scope.gender={isopen:false} but that didn't help.
Any idea on what might be the problem here? The dropdown is working perfectly. I just want to get rid of these errors in the console.
I had the same issue, I believe it has something to do with the overlap of bootstrap's drop-down. Try removing the "dropdown-toggle" class from your button.
In my case it helped to simply remove the is-open attribute.
This is 2 years later, but updating your ui-bootstrap would fix this problem if you're using an older version (example 0.13 instead of 2.5)
Can any one provide me reference to angularjs dropdown with action links as shown in the image? From the action list if we mouse over on any lable separate action list should be shown out. Please see the attached screen shot for reference. I should be able to have part2 also as shown in the image. The official Angularjs UI Bootstrap dropdown menu (ui.bootstrap.dropdown) provides only one list of actions (part1 from the image)
As of now I have used the following normal code which is working fine :
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
Save Options <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href ng-click="saveFilter(ui3DataSet)">Save Filter</a></li>
<li><a href ng-click="saveAsFilter(ui3DataSet)">Save Filter As</a></li>
</ul>
</div>
But now when I mouse over saveFilter(ui3DataSet), another list should be shown on the right side. I am looking for any Angularjs plugin provides this feature readily.
As per #Dmitri Zaitsev, the following solves the issue:
<li class="dropdown-submenu">
<a href ng-click="saveAsFilter(ui3DataSet)">Others</a>
<ul class="dropdown-menu">
<li> One </li>
<li> two </li>
</ul>
</li>
Here is a pure Bootstrap implementation:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3#comments
You could wrap it into Angular directive if you want to (see e.g. the implementation of jQuery Passthrough by UI Utils).
Also other threads that might be of help/related:
Dynamically creating nested navigation menu item using Bootstrap and Angularjs
AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive
Angular UI multi-level Dropdown Toggle