angularjs-dropdown-multiselect使用

介绍一个非常好用下拉列表插件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190116200026652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amlhbmdkb25nMTk5Mg==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190116200010723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amlhbmdkb25nMTk5Mg==,size_16,color_FFFFFF,t_70)

使用步骤：

• 引入js文件，去官网下周

<script src="static/lib/angularjs-dropdown-multiselect.min.js"></script>

• 引入module

angular.module('myModule', ['angularjs-dropdown-multiselect']);

• 页面中使用，

<div ng-dropdown-multiselect="" options="devUser" selected-model="devUserSelected" 
		extra-settings="multiSelectSettings" events="devEvent"
                        translation-texts="translationTextsSettings">
</div>

options：下拉数据源，是个对象数组，对象关键参数：id、lable
selected-model：你选中的对象，是个对象数组
extra-settings、translation-texts：配置项，是对象
events：回调函数
更多详细属性介绍看官方文档吧
http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main

由于下拉数据源是一次性获取的，如果数据量很大打开会迟钝好几秒，我是这么解决的：

• 默认只展示20条下拉数据（我这里是从表中拿的）

• 根据用户输入值去表中模糊查询

• 所以我们需要监听用户输入值变化的函数，但该插件并未提供，所以我们只能稍微改造下这个插件

• 打开angularjs-dropdown-multiselect.min.js，代码很乱的话格式化一下

• 找到最底部输入值的那个input标签，给它加个ng-change事件，参数就是用户输入的值

• 

• 再把这个事件返回出去

• 这个changeOption函数就是用户可以接收的实际函数，拿到这个函数了我们就可以根据传来的参数去表中查数据展示到下拉列表
• 
  
  
  这样就可以避免下拉数据过大导致的迟钝问题，每次都根据用户输入的值去模糊查询，并且再加个limit限制