简介
@rubicon9/ng2-select
是一个 Angular 2+ 的下拉选择框组件库,它可以用于自由地实现可搜索和可多选的下拉选择框。本文将为您详细介绍如何使用该组件库。
安装
npm install @rubicon9/ng2-select --save
引入
要使用该组件库,需要在 AppModule 中引入并导出 NgSelectModule
模块:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - -------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------ -------------- -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
使用
组件库包括 ng-select
组件和 ng-dropdown-panel
组件。
基本使用
只需在视图中加入 <ng-select>
标签,然后绑定 ngModel
和 items
属性即可实现基本的单选下拉选择框。
<ng-select [ngModel]="selectedItem" [items]="items"></ng-select>
多选和搜索
要开启多选和搜索功能,需在视图中对 ng-select
标签增加 multiple
和 search
属性,然后绑定 ngModel
和 items
属性。
<ng-select [ngModel]="selectedItems" [items]="items" [multiple]="true" [search]="true"></ng-select>
过滤
要过滤下拉选择框中的选项,可以使用 filter
属性:
<ng-select [ngModel]="selectedItem" [items]="items" [filter]="true"></ng-select>
自定义显示的文本
要显示自定义的文本,可以在 ng-select
标签中增加 bindValue
和 bindLabel
属性,通过这两个属性,我们可以把 items
数组中的某个属性绑定到 ng-select
上,以实现自定义显示的文本:
<ng-select [ngModel]="selectedItem" [items]="items" [bindValue]="'id'" [bindLabel]="'name'"></ng-select>
自定义选择框
使用 ng-template
标签可以实现自定义选择框。首先在 ng-select
标签中新增 dropdownTemplate
属性,然后在组件中用 ng-template
标签重新定义下拉选择框:
<ng-select [ngModel]="selectedItem" [items]="items" [dropdownTemplate]="customTemplate"> <ng-template #customTemplate let-item="item"> <!-- 自定义下拉选择框 --> </ng-template> </ng-select>
自定义选择框面板
使用 ng-template
标签可以实现自定义选择框面板。首先在 ng-select
标签中新增 optionTemplate
属性,然后在组件中用 ng-template
标签重新定义下拉选择框面板:
<ng-select [ngModel]="selectedItem" [items]="items" [optionTemplate]="customOptionTemplate"> <ng-template #customOptionTemplate let-item="item"> <!-- 自定义选择框面板 --> </ng-template> </ng-select>
示例代码
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- - --------- ------------ ---------- ------------------------ ---------------------------- ------------ ------ ------------ ---------- ------------------------- --------------- ----------------- ---------------------------- ---------- ------------ ---------- ------------------------ --------------- ---------------------------- ---------- -------- ------------ ---------- ------------------------ --------------- ------------------ --------------------------------- ---------- -------- ------------ ---------- ------------------------ --------------- ------------------------------------ ------------ --------------- ---------------- ---- -------- --- -------------- ------------ ---------- ------ -------- ------------ ---------- ------------------------ --------------- ---------------------------------------- ------------ --------------------- ---------------- ---- -------- --- -------------- ------------ - -- ------ ----- ------------ - ------------- --- - ------ -------------- ----- - ------- --------- ------ ----- - - - --- ------ ----- ----- -- - --- ------ ----- ----- -- - --- -------- ----- ------- -- - --- ------- ----- ------ -- - --- ------- ----- ------ - -- -
总结
@rubicon9/ng2-select
组件库是一个功能齐全的下拉选择框组件库,它支持单选、多选、搜索、过滤以及各种自定义功能,您可以按照上述步骤使用它。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055cad81e8991b448da127