简介
angular-2-dropdown-multiselect-edited 是一个基于 Angular 框架的多选下拉框组件。使用该组件可以方便地实现多选下拉框控件。
安装
在使用 angular-2-dropdown-multiselect-edited 之前，需要先安装：
npm install angular-2-dropdown-multiselect-edited --save
使用
导入模块
在使用 angular-2-dropdown-multiselect-edited 之前，需要先在你的 module 中导入该模块：
-- -------------------- ---- ------- ------ - --------------------------- - ---- ---------------------------------------- --- ----------- -- --- -------- - ---- ------------------------------------- -- -- --- -- ------ ----- ---------- - -展开代码
使用组件
在你的组件中使用 NgMultiSelectDropDown 组件，如下所示：
<ng-multiselect-dropdown [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"></ng-multiselect-dropdown>
注：定义下拉框的数据源和选项设置属性可以根据需要灵活配置。
-- -------------------- ---- ------- ------------ - - - -------- -- ---------- -------- -- - -------- -- ---------- ----------- -- - -------- -- ---------- ------ -- - -------- -- ---------- --------- -- - -------- -- ---------- ---- ------ - -- ------------- - --- ---------------- - ---展开代码
配置选项
你可以使用以下设置选项自定义下拉列表框：
-- -------------------- ---- ------- ---------------- - - ---------------- ------ -------- ---------- ---------- ------------ -------------- ------- ----- ---------------- --------- ----- --------------- -- ------------------ ---- --展开代码
singleSelection: 是否可以同时选择多个选项，默认为false。idField: 数据源中唯一标识字段的名称，默认为id。textField: 数据源中显示字段的名称，默认为text。selectAllText: 全选按钮的文本，默认为Select All。unSelectAllText: 取消全选按钮的文本，默认为UnSelect All。itemsShowLimit: 选项最多显示的数量，默认为3。allowSearchFilter: 是否允许搜索选项，默认为true。
绑定选项
selectedItems 属性用于双向绑定选中的选项，可以在组件中获得选中的选项。如果想要实现单向绑定，可以使用 selectedItem 属性。
selectedItems: any = [ { item_id: 3, item_text: 'Pune' }, { item_id: 4, item_text: 'Navsari' } ];
添加自定义样式
为了定制化自己的界面风格，可以使用以下 CSS 类自定义下拉框的样式：
multiselect-dropdown: 外层 CSS 类。dropdown-btn: 触发下拉框展开和关闭的按钮 CSS 类。dropdown-list: 下拉框选项列表 CSS 类。dropdown-item: 下拉框选项 CSS 类。
示例代码
以下是使用 angular-2-dropdown-multiselect-edited 的示例代码：
<ng-multiselect-dropdown [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"></ng-multiselect-dropdown>
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ ---------- ------ - ------------ - --- ------------- - --- ---------------- - --- ---------- - ----------------- - - - -------- -- ---------- -------- -- - -------- -- ---------- ----------- -- - -------- -- ---------- ------ -- - -------- -- ---------- --------- -- - -------- -- ---------- ---- ------ - -- ------------------ - - - -------- -- ---------- ------ -- - -------- -- ---------- --------- - -- --------------------- - - ---------------- ------ -------- ---------- ---------- ------------ -------------- ------- ----- ---------------- --------- ----- --------------- -- ------------------ ---- -- - -展开代码
总结
angular-2-dropdown-multiselect-edited 提供了一种快速实现多选下拉框的方法，在实际工程中可以方便地使用该组件完成这类功能的开发。希望本次使用教程可以帮助读者了解和掌握该组件的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bf981e8991b448e5acf
