我是 angular js 的新手。我有 dropdown，其中有 20 多个元素。该列表将继续增加。所以，我想为此设置一个滚动条。我尝试了不同的方法，将 size 属性用于 select 和 overflow 但没有成功。我的代码就像 -
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-3 control-label" for="domain">Domain</label>
<div class="col-xs-4">
<div class="multiselect">
<div class="selectBox" ng-click="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes" >
<label ng-repeat="domain in allDomainValues" for="{{domain.name}}">
<input type="checkbox" value={{domain.name}} ng-click="getthecheckeddomains(domain.name)" ng-disabled="isalreadychecked" id="{{domain.name}} " />{{domain.name}}
</label>
</div>
</div>
</div>
</div>
</div>
CSS-
.multiselect {
width: 169px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
在 Controller 中-
var expand = false
$scope.allDomainValues = [{ name: 'HR' }, { name: 'Finance' }, { name: 'Banking' }, { name: 'Telecom' }];
$scope.showCheckboxes = function() {
var checkboxes = document.getElementById("checkboxes");
if (!expand) {
checkboxes.style.display = "block";
expand = true;
} else {
checkboxes.style.display = "none";
expand = false;
}
};
如何解决？任何帮助对我来说都是很好的。
最佳答案
<!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>
.dropdown-menu{
max-height: 300px;
overflow-y: auto;
}
</style>
</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" 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>
Javascript :
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;
};
}
关于javascript - 如何为下拉菜单添加滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43755688/