# Angular实现下拉菜单多选 写这篇文章时，引用文章地址如下： [http://ngmodules.org/modules/angularjs-dropdown-multiselect](http://ngmodules.org/modules/angularjs-dropdown-multiselect) [http://dotansimha.github.io/angularjs-dropdown-multiselect/#/](http://dotansimha.github.io/angularjs-dropdown-multiselect/#/) AngularJS Dropdown Multiselect This directive gives you a Bootstrap Dropdown with the power of AngularJS directives. ### Features Based on Bootstrap's dropdown. jQuery is not necessary. Seperated your data and the selection data. no modification to the data made. Built-in search. Complete control on the selected items model to fit it to your requirements. Two view options: normal list and checkboxes. Pre-selected values. Limit selection count. Grouping items by property. Callback events. ### Demo [http://dotansimha.github.io/angularjs-dropdown-multiselect/](http://dotansimha.github.io/angularjs-dropdown-multiselect/) Dependencies required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0 Make sure to add the dependencies before the directive's js file. Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file. Install Download the files Using bower: Just run bower install angularjs-dropdown-multiselect Manually: You can download the .js file directly or clone this repository. Include the file in your app <script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>. You can also use the minfined version (angularjs-dropdown-multiselect.min.js). Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect Usage and Documentation See the documentation and examples in the GitHub pages: [http://dotansimha.github.io/angularjs-dropdown-multiselect/](http://dotansimha.github.io/angularjs-dropdown-multiselect/) 由以上英文文档可以得知，若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0，如下所示: <script src="js/angularjs-dropdown-multiselect.js"></script> <script src="js/lodash.min.js"></script> 并在app.js模块中添加依赖angularjs-dropdown-multiselect。如下所示: var routerApp = angular.module('routerApp', ['ui.router', 'ngCookies', 'ngTable', 'angularjs-dropdown-multiselect', 'MedListModule']); yh_set_dtl.html核心代码如下： ~~~ <div style="float:left">优 惠 类 型:</div> <!-- Demo --> <div ng-dropdown-multiselect=""   options="yhctlModelOptions"   selected-model="yhctlModel"  checkboxes="true"> </div> controllers.js代码如下:  $scope.yhctlModel = [];  $scope.yhctlModelOptions = [                                {id: 1, label: '限定用户'},                                {id: 2, label: "限定商家"},                                {id: 3, label: "限定使用次数"},                               {id: 4, label: "限定药品"},                                {id: 5, label: "与其它优惠共享"}]; ~~~ 效果图如下：