npm 包 @rubicon9/ng2-select 使用教程

阅读时长 7 分钟读完

简介

@rubicon9/ng2-select 是一个 Angular 2+ 的下拉选择框组件库,它可以用于自由地实现可搜索和可多选的下拉选择框。本文将为您详细介绍如何使用该组件库。

安装

引入

要使用该组件库,需要在 AppModule 中引入并导出 NgSelectModule 模块:

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - -------------- - ---- -----------------------

------ - ------------ - ---- ------------------

-----------
  -------- - -------------- ------------ -------------- --
  ------------- - ------------ --
  ----------    - ------------ -
--
------ ----- --------- - -

使用

组件库包括 ng-select 组件和 ng-dropdown-panel 组件。

基本使用

只需在视图中加入 <ng-select> 标签,然后绑定 ngModelitems 属性即可实现基本的单选下拉选择框。

多选和搜索

要开启多选和搜索功能,需在视图中对 ng-select 标签增加 multiplesearch 属性,然后绑定 ngModelitems 属性。

过滤

要过滤下拉选择框中的选项,可以使用 filter 属性:

自定义显示的文本

要显示自定义的文本,可以在 ng-select 标签中增加 bindValuebindLabel 属性,通过这两个属性,我们可以把 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

纠错
反馈