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