I have copied code directly form the Angular Bootstrap UI Plunkr
I am using a blank Angular FullStack (Mean) template for building an application.
When I use the code from the Angular Bootstrap uib-dropdown it ends up formatted incorrectly and does not work, all other angular bootstrap components seem to work fine
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-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>
Upgrade Angular UI in bower.json:
"angular-bootstrap": "~0.14.3",
Then run:
bower install
I have solved my problem by not using the Angular Bootstrap Dropdown directive and gone with Bootstrap + Plain Old Angular code which I googled.
This is working fine for me.
<div class="input-group">
<div class="btn-group" ng-class='{open: open}'>
<button class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
ng-click='open=!open'>
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="choice in ['the', 'quick', 'brown', 'fox']"
ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
{{choice}}
</li>
</ul>
</div>
</div>
I had this problem. I updated Angular UI Bootstrap to 0.14.3 version & then resolved the problem.
You should use 'uib-' prefix for each directive, check this answer:
https://stackoverflow.com/a/34725928/3439101
Related
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 created a dropdown using angularjs and bootstrap.
i want to open a link if it clicks any value from the the dropdown.
But not able to get the data in the dropdownlist.
Below is the fiddle link.help is much appreciated:-
Code goes here:-
HTML Code
<div ng-app="myApp" ng-controller="myController">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data- toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" ng-repeat="item in items">
<li>{{item.GroupName}}</li>
</ul>
</div>
</div>
Controller
var myApp=angular.module("myApp",[]);
myApp.controller("myController",['$scope',function($scope){
$scope.items=[{"GroupID":"15","GroupName":"Client Management Product"},
{"GroupID":"5","GroupName":"DevOps"},
{"GroupID":"18","GroupName":"Resource Centre"},
{"GroupID":"16","GroupName":"SEF"},
{"GroupID":"17","GroupName":"Shared Services"}]
}]);
http://jsfiddle.net/smsh/st4hn14a/
Hi you have not added boootstrap.min.js and jQuery as external resources in your example
Check this Demo
<ul class="dropdown-menu">
<li ng-repeat="item in items">{{item.GroupName}}</li>
</ul>
I want to bring drop downs into my project and I took the code from the example. The drop down appears as in the example but when I click 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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</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;
};
});
I had the same problem and I solved by deleting the line dropdown-toggle
I don't know what the problem is but it works well in this way
Here what I did:
This si 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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
and this is the code without dropdown-toggle
<!-- 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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Edit:
The above example works if you are using angular-ui-bootstrap Version: 0.10.0
Now I've changed the ui-bootstrap using this
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
And now all work like a charm
There are a few problems in your code:
Your HTML is not valid, the last <div> tag shouldn't be there
<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>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</div>
</form>
You did not reference ui.bootstrap as a module dependency
angular.module('startupApp', [
'ui.bootstrap'
])
Did you include the right files ?
AngularJS
Angular UI Bootstrap
Bootstrap CSS
You don't need anything special in your controller, the dropdown and dropdown-toggle directives are self-sufficient.
JsFiddle Demo
After much struggle I just found the answer that worked for my case. I only needed to add parse-angular to my angular.module('myapp'['parse-angular']).
First I want to say thank you to Jorge Casariego for his answer. His answer helped me to get much further.
There was one problem at the end though, that neither $scope.toggled = function(open) {...} nor $scope.toggleDropdown = function($event) {...} where called when someone interacted with the Dropdown (see example of them here). After looking into the ui-bootstrap-tpls-0.10.0.js code I had to further adjust the html-code:
the attribute dropdown should be a class-value not a attribute itself.
is-open=... is not needed, ui-bootstrap will take care of it
attach a ng-click to the <a> element in the list.
This did not 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 this did (add dropdown as a 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 then:
$scope.toggleDropdown = function($event) {
$event.preventDefault();
console.log('This is your event now: ', $event);
};
I know there are newer versions available of angular-ui-bootstrap, but for the record I put it up here. It works with version 0.10.0.
I created a contact form with angularJS and when I try to integrate it in the page that I built with bootstrap, the Navbar dropdowns and the toggle button don't work. How do I fix it in the best and easiest way?
Link To My Code
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<span class="glyphicon glyphicon-briefcase"></span> Our Product<b class="caret"></b>
<ul class="dropdown-menu">
<li>A Collaborative Solution </li>
<li>A Robust Platform</li>
<li>How It Works</li>
</ul
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Our Team</li>
<li>Our Advisory Board</li>
<li>Our Partners</li>
<li>Our Customers</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-list-alt"></span> In the News<b class="caret"></b>
<ul class="dropdown-menu">
<li>Press Releases</li>
<li>Industry News</li>
</ul>
</li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span> Contact Us </li>
</ul>
</div>
</div>
</div>
Thanks for the help!
Don't use Bootstrap's js file and try to avoid jQuery with Angular (jQuery shouldn't be needed). Instead, just include UI Bootstrap and it will add bootstrap's JavaScript functionality as Angular directives.
Include the ui-bootstrap script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
then, inject it as a module dependency in your app:
angular.module('myApp', [
'ui.bootstrap'
]);
This will make the Bootstrap components work in your application. Be sure to read the documentation for UI Bootstrap.