AngularJS進階(五)Angular實現下拉菜單多選
Angular實現下拉菜單多選
寫這篇文章時，引用文章地址如下：
http://ngmodules.org/modules/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/
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
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/
由以上英文文檔可以得知，若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS?>=?1.2,?Lodash?>=?2,?Bootstrap?>=?3.0，如下所示:
并在app.js模塊中添加依賴angularjs-dropdown-multiselect。如下所示:
var?routerApp?=?angular.module('routerApp',?['ui.router',?'ngCookies',? 'ngTable',?'angularjs-dropdown-multiselect',?'MedListModule']);
yh_set_dtl.html核心代碼如下：
options="yhctlModelOptions" selected-model="yhctlModel" checkboxes="true">
controllers.js代碼如下:
$scope.yhctlModel?=?[];
$scope.yhctlModelOptions?=?[
{id:?1,?label:?'限定用戶'},
{id:?2,?label:?"限定商家"},
{id:?3,?label:?"限定使用次數"},
{id:?4,?label:?"限定藥品"},
{id:?5,?label:?"與其它優惠共享"}];
效果圖如下：
Angular AngularJS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章