trying to do dropdown with angularJS and bootsrap by guide, but id doesnt work though :) Here is my code:
I dont know, maybe its just old tutorial that i use, but thats all i found by now.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="dropdown">
<div class="dropdown">
<button type="button" class="btn btn-danger">Menu</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-model="dd.data.multipleSelect">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="a in subjects"><a ng-click="dropboxitemselected(a)">{{a}}</a><li>
</li>
</ul>
</div>
</body>
</html>
var app = angular.module ('app', []);
app.controller('dropdown', function ($scope) {
$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
$scope.selectedItem;
$scope.dropboxitemselected = function (item) {
$scope.selectedItem = item;
alert($scope.selectedItem);
};
});
The bootstrap dropdown example says to wrap everything in a <div class="dropdown">. It doesn't work if you don't...
<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">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Related
I have a bootstrap code for the search bar with a dropdown list but I want to display the option upon selection one from the dropdown list. Currently, it shows "All" and even you click on the dropdown and select any of the options it does not work. Anyone on it using JavaScript or jQuery to make it work
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
You could simple add click event on
dropdown-item
see below
$('.dropdown-menu .dropdown-item').click(function(){
var value = $(this).text();
console.log(value)
// Update the value and show it to the user
$(this).parent().parent().find(".dropdown-toggle").html(value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
I have a problem with the following code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="valeur">Texte</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Changer le texte
</li>
</ul>
</div>
<script>
function lafonction() {
document.getElementById('valeur').innerHTML = 'Nouveau texte';
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
When I select an option from the dropdown menu, the values are changed but the dropdown menu disappears both visually and in the source code.
Thank you in advance for your help !
You need to link bootstrap at your project
for more informations about bootstrap dropdown, I suggest you this site (with working examples) :
https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
<!DOCTYPE html>
<html>
<head>
<!--BEGIN BOOTSTRAP-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!--END BOOTSTRAP-->
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="valeur">Texte</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Changer le texte</li>
</ul>
</div>
</body>
</html>
<script>
function lafonction() {
document.getElementById('valeur').innerHTML='Nouveau texte';
}
</script>
I am trying to follow bootstrap button drop down , but not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div class="dropdown" style="display: block;">
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Edit:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Components Tutorial</title>
</head>
<body>
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
</body>
</html>
Aside from the missing > if not a typo, you are not including the dropdown button to toggle the menu.
e.g.
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
So putting that on your current code:
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Example Fiddle
I am developing my first App with AngularJS. I am trying to create a Dropdown menu, but unable to bring it under control. Here is the html:
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Split button!</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>
This does give me the desired output as shown below:
but the dropdown is always open, instead of toggling.
Can someone please advise what I am doing wrong?
======= Here are the header files =========
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="dist/css/mobile-angular-ui-base.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="dist/js/mobile-angular-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Required to use $swipe, $drag and Translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
<script type="text/javascript" src="app.js"></script>
The answer on your question is using last versions of Angular+jQuery+Bootstrap+Angular UI.
I am having some trouble with a dropdown menu with bootstrap. I have browsed around the other questions on here and not found an answer that is working for me. Here is the HTML head
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>
I made careful note to link to JQuery before bootstrap.js
Here is the code for the button. This markup is taken pretty much exactly from the bootstrap 3 docs
<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
Then of course, the script to call the dropdown.
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
If anyone could help me figure out what I'm missing here I would really appreciate it. Thanks!
You need to wrap the entire dropdown menu with an element that has the .dropdown class
You also need to remove .pull-right from the button and apply it to .dropdown
<div class="dropdown pull-right">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
</div>
Example: http://jsfiddle.net/52VtD/404/