介绍
angular2-multiselect-dropdown-inv 是一个 Angular2+ 的多选下拉框组件，提供了丰富的自定义选项和可定制化的选项展示和选中样式。
安装
首先，你需要拥有一个 Angular 项目，然后可以通过以下命令安装 angular2-multiselect-dropdown-inv ：
npm install angular2-multiselect-dropdown-inv --save
引入
在需要使用 angular2-multiselect-dropdown-inv 的模块中引入它，并将它添加到模块的 imports 数组中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------- -- ------ ------- ---
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在组件的模板中使用 ng-multiselect-dropdown 标记：
-- -------------------- ---- -------
------------------------
---------------------
---------------------
---------------------------
-----------------------------
---------------------------------
-------------------------------------
-----------------------------------
----------------------------------------
--------------------------ng-multiselect-dropdown 标记包含以下属性：
data- 选项数组。每个选项对象必须包含id和itemName属性。settings- 一个对象，用来配置下拉框的行为和外观。包括以下选项：singleSelection- 是否允许只选择一个选项。idField- 每个选项对象中描述id的属性名称。textField- 每个选项对象中描述itemName的属性名称。selectAllText- 全选时下拉框中显示的文本。unSelectAllText- 取消全选时下拉框中显示的文本。enableCheckAll- 是否允许选择全部选项。selectAddedValues- 是否允许选择新添加的值。
ngModel-已选项数组。onSelect- 选中某个选项时触发的事件。该事件将一个选项对象作为参数传递给事件处理函数。onDeSelect- 取消选中某个选项时触发的事件。该事件将一个选项对象作为参数传递给事件处理函数。onSelectAll- 全部选中时触发的事件。该事件将选项数组作为参数传递给事件处理函数。onDeSelectAll- 全部取消选中时触发的事件。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- -------------------- - ---- ------------------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
------------- -------------------- - -
- --- -- --------- ------- --
- --- -- --------- ----------- --
- --- -- --------- ----------- --
- --- -- --------- -------- --
- --- -- --------- ------ ------ --
- --- -- --------- --------- --
- --- -- --------- -------- --
- --- -- --------- -------- --
- --- -- --------- ------- --
- --- --- --------- -------- -
--
-------------- -------------------- - ---
----------------- -------------------- - -
---------------- ------
-------- -----
---------- -----------
-------------- ------- -----
---------------- --------- -----
--------------- -----
------------------ ----
--
------------------ ---- -
------------------
-
------------------ ---- -
-------------------
-
---------------- ---- -
------------------
-
-------------------- ---- -
-------------------
-
-结论
angular2-multiselect-dropdown-inv 是一个非常方便的 Angular 组件，可以简化前端开发中选择多个选项的交互操作。希望本文的教程可以帮助你更好地使用它，并且能够在前端开发中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e8d