简介
ng2-select-md 是一个基于 Angular 2+ 的下拉框选择插件，支持搜索、多选和自定义展示等功能。此插件堪称是前端开发中不可或缺的工具。
安装
使用 npm 进行安装：
npm install ng2-select-md --save
基本用法
在 HTML 中使用组件标签，并为其传递选项。
<ng-select [options]="options"></ng-select>
在组件中导入依赖并定义选项列表。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------ -
-------- ----------------- - -
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
- ------ ------- ------ ------ --
- ------ --------- ------ -------- -
--
------------- - -
----------- ---- -
-
-高级用法
搜索功能
添加 searchable 属性以启用搜索功能。
<ng-select [options]="options" [searchable]="true"></ng-select>
多选功能
添加 multiple 属性以启用多选功能。
<ng-select [options]="options" [multiple]="true"></ng-select>
自定义标签
使用 labelTemplate 属性传入一个模板以自定义标签的展示方式。
<ng-select [options]="options" [labelTemplate]="myLabelTemplate"></ng-select>
<ng-template #myLabelTemplate let-item="item">
<img [src]="'assets/' + item.value + '.jpg'" style="height: 20px; width: 20px;">
{{ item.label }}
</ng-template>自定义选项
使用 optionTemplate 属性传入一个模板以自定义选项的展示方式。
-- -------------------- ---- -------
---------- ------------------- ------------------------------------------------
------------ ----------------- ----------------
----- ------------------------
-- ----------------------- --------- --------------
-- ------------------------ --------- ---------------
-- ------------------------ --------- ---------------
-- ---------------------- --------- -------------
-- ------------------------ --------- ---------------
-------
-- ---------- --
--------------总结
ng2-select-md 是一个功能强大的 Angular 2+ 下拉框选择插件，支持搜索、多选和自定义展示等功能。通过本文介绍的使用教程，相信读者可以掌握其基础用法和高级用法，并应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dda6f