以下是一个使用Angular实现多选下拉菜单的示例代码:
HTML模板:
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
dropdownOpen = false;
options = ['选项1', '选项2', '选项3', '选项4'];
selectedOptions = [];
toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
}
updateSelectedOptions() {
this.selectedOptions = this.options.filter(option => option.checked)
.map(option => option.value);
}
}
在上面的示例中,使用ngFor
指令循环遍历选项数组,并使用ngModel
指令将每个选项的checked
属性与复选框的状态绑定。当复选框的状态发生变化时,调用updateSelectedOptions
方法更新已选中的选项数组。
通过点击按钮切换dropdownOpen
属性的值来控制下拉菜单的显示与隐藏。当有选项被选中时,将选中的选项通过逗号连接并显示在按钮上;否则,显示默认的提示文本"选择选项"。
你可以根据自己的需求修改和定制这个示例代码。