# 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:?"與其它優惠共享"}]; ~~~ 效果圖如下： ?