我是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;
}
在控制器中 -
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;
}
};
如何解决这个问题?任何帮助对我来说都很棒。