Menu
I use angular-ui drop down
It works fine but I have no clue how to handle multiple item in drop down.
Consider following example in Plunker
HTML
<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 ng-repeat="item in items"><a href="#">{{item}}</a></li>
</ul>
</div>
I want define scroll and set dropdown shorter.
Any ideas?
362
Angular has another way to get the selected value in the dropdown using the power of ngModel and two-way data binding. The ngModel is part of the forms module. We need to import it into the NgModule list in the app. module , which will be available in our app.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
You could just have a css rule to define that, for dropdown-menu.
.dropdown-menu{
max-height: 300px; /*Provide height in pixels or in other units as per your layout*/
overflow-y: auto; /*Provide an auto overflow to diaply scroll*/
}
Plnkr
Or in general you may want your application to have its own styled dropdown, in such cases add a custom class and rule for your dropdowns (So that you website does not look like a bootstrap website :) ) an example:-
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [];
for(i=0; i<100; i++){
$scope.items.push("val_" + i);
}
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
}.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}
</style>
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group myapp-select" 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 ng-repeat="item in items"><a href="#">{{item}}</a></li>
</ul>
</div>
</div>
</body>
</html>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
