角度自定义下拉列表

Question

如何在角度和加载数据中创建自定义下拉列表

<select dropdown name="mydropDown" class="form-control dropdown-toggle">
<option *ngFor="let item of testList" [value]="item.value">
{{item.name}} 
</option>
</select>

Answer 1

试试这个！

组件中的

export class TestComponent implements OnInit {
testList = [{ value: '1', name: 'A' }, { value: '2', name: 'Test B' }];
constructor() { }
ngOnInit(): void {
}
}

组件内html

<select dropdown name="mydropDown" class="form-control dropdown-toggle">
<option *ngFor="let item of testList" [value]="item.value">
{{item.name}} 
</option>
</select>

Answer 2

为此，您需要将其添加到ts

document.addEventListener("click", function(event) {
var dropdown = document.getElementsByClassName("newdropdown-selecetd")[0];
var dropdownContent = document.getElementById("dropdown-content");
var dropdownBtn = document.getElementById("dropdown-btn");
if (!dropdown.contains(event.target)) {
dropdownContent.classList.remove("show");
}
});
function toggleDropdown() {
var dropdownContent = document.getElementById("dropdown-content");
dropdownContent.classList.toggle("show");
}
function selectOption(option) {
document.getElementById("dropdown-btn").textContent = option;
toggleDropdown(); // Close the dropdown after selecting an option
}

.newdropdown-selecetd {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f5fcff;
min-width: 160px;
border: 1px solid #1aa0e2 ;
z-index: 1;
border-radius: 3px;
}
.dropdown-content a {
color: #5e7891;
padding: 5px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: #1aa0e2;
}
.dropdown-content.show {
display: block;
}
.active-one {
background: #aba8a8;
color: #fff !important;
}
.dropdown-content a.active-one:hover {
background: #aba8a8;
color: #fff !important;
}
span#dropdown-btn {
position: relative;
color: #5e7891;
padding: 8px 10px;
border: 1px solid #0083cc;
cursor: pointer;
user-select: none;
display: inline-block;
height: 11px;
background-color: #f5fcff;
font-size: 14px;
font-family: 'Roboto Condensed', Arial,'Nimbus Sans L','Helvetica CY',sans-serif;
line-height: 12px;
width: 152px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 38px;
max-width: 152px;
box-sizing: border-box;
height: 29px;
border-radius: 4px;
}
span#dropdown-btn:before {
content: "";
background: #1aa0e2;
height: 27px;
width: 31px;
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #0083cc;
}
span#dropdown-btn:after {
position: absolute;
content: "";
top: 12px;
right: 10px;
width: 0;
height: 0;
border: 5px solid transparent;
border-color: #fff transparent transparent;
}

<div class="newdropdown-selecetd">
<span class="dropbtn" id="dropdown-btn" onclick="toggleDropdown()">Dropdown </span>
<div class="dropdown-content" id="dropdown-content">
<a href="#" onclick="selectOption('Option 1')">Option 1</a>
<a href="#" onclick="selectOption('Option 2')" class="active-one">Option 2</a>
<a href="#" onclick="selectOption('Option 3 with long name')">Option 3 with long name</a>
<a href="#" onclick="selectOption('Option 4')">Option 4</a>
<a href="#" onclick="selectOption('Option 5')" class="active-one">Option 5</a>
</div>
</div>