在前端开发中，有时需要一个多选下拉框的组件，angular-bb-multi-select就是一个可以解决这个问题的npm包。本文将介绍如何使用该npm包。
安装
angular-bb-multi-select需要先安装angularjs和Bootstrap，安装命令如下：
npm install angular-bb-multi-select angularjs bootstrap
用法
在你的html中，添加一个select元素和一个ul元素，它们将被转换成一个多选下拉框：
<select bb-multi-select ng-model="selected" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<ul>
<li ng-repeat="option in selected">{{option}}</li>
</ul>注：ng-model属性指定了该选择框将绑定到的对象属性，multiple属性指定选择框是否支持多选。
自定义
你可以通过设置bbMultiSelectConfig来自定义下拉框的外观和行为。例如，你可以更改以下属性：
app.config(['bbMultiSelectConfig', function(bbMultiSelectConfig) {
bbMultiSelectConfig.selectedClass = 'bg-info'; // 选中选项的背景颜色
bbMultiSelectConfig.itemsDisplayed = 3; // 展示多少项才显示“更多”
}]);其他
除以上介绍的使用方法和自定义外，angular-bb-multi-select还可以：
- 添加
select元素和ul元素的类名 - 添加可供选择的项，最大高度和z-index
- 支持对选择框进行禁用/启用等操作
详细说明请查阅官方文档。
示例代码
如下是一个完整的示例代码，其中展示了angular-bb-multi-select的基本使用方法：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
------------------------------ ----- ------------
----- ---------------- --------------- ---------------------------------------------------- --
----- ---------------- --------------- ----------------------------------------------------------------------- --
------- ---------------------- -----------------------------------------------
------- ---------------------- -----------------------------------------------------------
------- ---------------------- -------------------------------------------------------------------------------
------- -----------------------
--- --- - ----------------------- -------------------
------------------------------ ---------- ---------------- -
--------------- - ----------- -----------
----
---------------------------------- ----------------------------- -
--------------------------------- - ----------
---------------------------------- - --
----
---------
-------
----- -----------------------------
------- --------------- ------------------- ---------
------- ---------------------- ----------
------- ---------------------- ----------
------- ---------------------- ----------
---------
----
--- ----------------- -- -------------------------
-----
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005526181e8991b448cfe61