From d9d45270f99d972917d1a627490cbd1cd572f0d6 Mon Sep 17 00:00:00 2001 From: Gordon McGuire Date: Mon, 23 May 2016 10:22:19 +0100 Subject: [PATCH] Updated demo app to use a clearer example. Updated README to mention the demo app and include a link to an example on plunker. Rebuilt the module. --- README.md | 33 +++++++++++++++---------- dist/so-multiselect.css | 2 +- dist/so-multiselect.js | 2 +- dist/so-multiselect.min.js | 2 +- other/example.png | Bin 12847 -> 14591 bytes src/demo/app.js | 22 ++++++++--------- src/demo/index.html | 49 ++++++++++++++++++++++++------------- 7 files changed, 66 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 4d0124d..1cd6e62 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ so-multiselect [![Build Status](https://travis-ci.org/gordonmcg-sonalake/so-multiselect.svg?branch=master)](https://travis-ci.org/gordonmcg-sonalake/so-multiselect) [![codecov coverage](https://img.shields.io/codecov/c/github/gordonmcg-sonalake/so-multiselect.svg?style=flat-square)](https://codecov.io/github/gordonmcg-sonalake/so-multiselect) [![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)]() ================ -> Angular module that provides a multi-select dropdown list using checkboxes. +> Angular module that provides a multi-select dropdown list with checkboxes. ![so-multiselect](other/example.png) @@ -13,6 +13,13 @@ The required dependencies are: This module was built with the intention of using it alongside [UI Bootstrap](https://github.com/angular-ui/bootstrap). +Demo +----- + +For an example of `so-multiselect` in action, take a look at the demo app inside src/demo. + +Alternatively, you can find the same [example on plunker.](https://plnkr.co/edit/E3E5KpHdwemNaoXtWimB?p=preview) + Getting Started --------------- @@ -44,31 +51,31 @@ Set up your models in your controller: ```javascript -$scope.things = [{ - key: 't1', - name: 'Thing 1' +$scope.flavours = [{ + key: 'f1', + name: 'Strawberry' }, { - key: 't2', - name: 'Thing 2' + key: 'f2', + name: 'Classico' }, { - key: 't3', - name: 'Thing 3' + key: 'f3', + name: 'Mint' }]; -$scope.selectedItems = []; +$scope.chosenFlavours = []; -$scope.onThingsSelected = function(selectedItems) { - $scope.selectedItems = selectedItems; +$scope.onFlavourSelected = function(selectedItems) { + $scope.chosenFlavours = selectedItems; }; ``` Apply the directive to your HTML: ```html -
+
``` -* `items` takes a reference to the array of object to appear in the dropdown list, each object containing a `key` and `name`. +* `items` takes a reference to the array of object to appear in the dropdown list; each object must contain `key` and `name` attributes. * `name` is the value for the label that appears inside the trigger for the dropdown list. * `on-selected` takes a reference to the callback function you want to execute when an item is selected in the list. The `selectedItems` parameter contains an array of the selected objects. * `button-class` is an optional attirbute if you wish to add any extra CSS classes to the trigger for the dropdown list. diff --git a/dist/so-multiselect.css b/dist/so-multiselect.css index 38b735f..36a7c85 100644 --- a/dist/so-multiselect.css +++ b/dist/so-multiselect.css @@ -1,4 +1,4 @@ -/*! so-multiselect - 1.0.0 - 2016-05-17 +/*! so-multiselect - 1.0.0 - 2016-05-23 * Copyright (c) 2016 Sonalake; */ .multiselect-container .filter-wrap { diff --git a/dist/so-multiselect.js b/dist/so-multiselect.js index a2a9fef..d07be5a 100644 --- a/dist/so-multiselect.js +++ b/dist/so-multiselect.js @@ -1,4 +1,4 @@ -/*! so-multiselect - 1.0.0 - 2016-05-17 +/*! so-multiselect - 1.0.0 - 2016-05-23 * Copyright (c) 2016 Sonalake; */ (function(window, $, angular, undefined) { diff --git a/dist/so-multiselect.min.js b/dist/so-multiselect.min.js index c3c5a31..f74414b 100644 --- a/dist/so-multiselect.min.js +++ b/dist/so-multiselect.min.js @@ -1,4 +1,4 @@ -/*! so-multiselect - 1.0.0 - 2016-05-17 +/*! so-multiselect - 1.0.0 - 2016-05-23 * Copyright (c) 2016 Sonalake; */ !function(a,b,c,d){"use strict";c.module("multiselect.controllers",[]).controller("MultiSelectController",["$scope","$attrs","$parse","$filter","MultiSelectConfig","MultiSelectService",function(a,b,d,e,f,g){var h,i=this,j=a.$new(),k=f.openClass,l=c.noop,m=b.onToggle?d(b.onToggle):c.noop,n=!0;this.init=function(c){i.$element=c,b.isOpen&&(h=d(b.isOpen),l=h.assign,a.$watch(h,function(a){j.isOpen=!!a})),a.selectedItems()},this.toggle=function(a){return j.isOpen=arguments.length?!!a:!j.isOpen,j.isOpen},this.isOpen=function(){return j.isOpen},j.getToggleElement=function(){return i.toggleElement},j.getMenuElement=function(){return i.menuElement},j.focusToggleElement=function(){i.toggleElement&&i.toggleElement[0].focus()},a.itemSelected=function(b){a.filterItems[b]&&(a.filterItems[b].selected=!a.filterItems[b].selected)},a.selectedItemsString="All",a.selectedItems=function(){var b=e("filter")(a.filterItems,{selected:!0}),c="";if(0===b.length)c="All";else for(var d=0;d0&&d.init(b)}}}).directive("soMultiselectToggle",function(){return{restrict:"CA",require:"?^soMultiselect",link:function(a,b,d,e){if(e){var f=b.parent();e.toggleElement=b,e.menuElement=c.element(f.children()[1]);var g=function(c){c.preventDefault(),b.hasClass("disabled")||d.disabled||a.$apply(function(){e.toggle()})};b.bind("click",g),b.attr({"aria-haspopup":!0,"aria-expanded":!1}),a.$watch(e.isOpen,function(a){b.attr("aria-expanded",!!a)}),a.$on("$destroy",function(){b.unbind("click",g)})}}}}),c.module("so.multiselect",["multiselect.controllers","multiselect.directive","multiselect.services"]).constant("MultiSelectConfig",{openClass:"open"}).run(["$templateCache",function(a){a.put("templates/multiselect.tpl.html",'
\n \n
    \n
  • \n {{item.name}}\n
    • \n
\n
\n')}]),c.module("multiselect.services",[]).service("MultiSelectService",["$document",function(a){var b=null,c=function(a){var c=b.getToggleElement(),d=b.getMenuElement();a&&c&&c[0].contains(a.target)||a&&d&&d[0].contains(a.target)||b.$apply(function(){b.isOpen=!1})},d=function(a){27===a.which&&(b.focusToggleElement(),c())};this.open=function(e){b||(a.bind("click",c),a.bind("keydown",d)),b&&b!==e&&(b.isOpen=!1),b=e},this.close=function(e){b===e&&(b=null,a.unbind("click",c),a.unbind("keydown",d))}}])}(window,window.$,window.angular); \ No newline at end of file diff --git a/other/example.png b/other/example.png index f75d71cd73f20491e9a9bf38f9ff5f9f4ed017a9..6a8c53cce0cb8e2385a6e0b27ad08f3c8c129994 100644 GIT binary patch delta 11540 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 UotGtl2%RD1rB$SAB+P>U7vu)^3jhEB delta 9782 zcmb7qRZyH!vu%J03=rHhxI=Jvmq2iLg1ZL~GPt`t1PKHS?oNOZ+}#HEV1vV%{B=&% zdAN0N-IuSvm)_F7SNGbh_p8fKbBah6B^fjnLX){B>#$r_~|Q9P5i?>UDr2k^vq2D$zGyna3hpTcvT; zm5Ny+Ss&_VJcwRW4&o&Ot@{_k@M5gUI7GzM*7HZddMlAIllK`Q%lGTxv8<)XmB+Pn z|J$om??s=9yz^LBwE%#)7$zp55HpamaFUk&6YL)VhXzMM4*~`SkYhFif#TAqRapH1 zIB_wc++YAXIZ%ojUP49H$L<%~KhvNjc5)yPUNt%ZQ)70WkX->b0z?w7x2NZg$m0p; zH5A&n%dc(UBo%Sq#onP$Kicqp+OFi{*FS zGaifqZPw?zxVT^s0nv?oFW!p0KDp)y`{47gItM3cRMt!2-mqE+)h*fUdE&De&==!w z7q70ZRjnO2G&Il?_L<5tQDI(_;<6rl?fnvew*6@Oya1N04MW(l>e|2t1V&1bTL> zpATIh&V=R|h}y((t8qZX&p9`okb`=pC@{IiYrhSOGcDA{4@sdZ*~nl5k;Rc?U>+d{ zh9Cqc5Ob<d6l~hAYF_{LWrJ??@p0SvYK*qyHjjjt zwH>eiux6W0I3FBgHqYm~tHp`!m-^_i5iTNnd7e-;4lttIVpV&YW1A3&ub%l(V_uBb zoP3@4x&x?u)~4E)ulG&k%)~g(C-W&(^jC|q1+#Nl{@ccVuDIbHr^k~oFH0;?R|o~w zsb8M8v6sV-bAHX1(1Wsb;_G`>2QY>g)JlhEjles^5%J1X^r;<-`E6bgD=8RD^s5M- zsFObyXt;l+k@U{V>!jrT+mD;@47^~vk>>y^=^(M+Sg?t_&sE>G=D85%`R#!WsAs@d z)H(e>U$)3DEH}pPF6u@5f})L7{NatC398I4E{64libZx6c)>*RB42qOX}>@=4N3nT z@9kMuq2+*);;WvpzINSm65nlMi#?*bVYgv)e@`u?zHc&{l5GE5ze}6ZXHQ3j^~XP6 znruW46F>_en1G2(^oJ}h(NYch8UX_K60sqXG4Jm~u4m(2j|>3_cgJ7R=kV1b=zso7 zp!G=eD|_?~`aniGBt(+_b=mpO8RKPSV>N82dZXZSpKR+T+-cCx2OaWm&TI*Z>=Et- z`jDALVzn+3aoQfgsX;cj@;%$-b`ACK8IkbanR0&5nAK~@{)-JSBwaX+?s6I&zBJZ7 zzwpS8^VI$vsy!iv{mhTk3QpNl_||OZwQJ-bhBI+KDCpK`e!sC@iua0V!&Ox0*%?M4 z`sWuj@7Ms@OYM87)e8jQ(o2oFQjMSr_#H}bG?MJEq78yR*~R+qr2RB3>N*% zDW{8Z?Yy3u5rWu=eOW$bDG_(DL=ZWf2{0t2VDKT|;AUK1d4m6HeWhn?NvCU*IF6^; z?Dcg$zCF(y_pT7hYP=&n4^?Tj(>lEK9PoL`75?g79nxpM01N7D=gU{jz~?xfV?uM* zZqWX^-5{A!y&3|o0kJbATHUEnjd9jJpmbvW&e$>~{)^;Tb3w=EACQ}xDzOH%sy24&r zXbyxokszlA;4!T1O;v&|XNsC_j~u0GY_o0pGv~uBKO=q(O*Ee%wx|7sLt62|?wBh+ z>;y(==Y7E-u0KYxTz#M~&pVUs>(CH3%Q;s*wf`k~*pcvv_;=4lgY+yQSXTx$a`{9a z{AHTsMCej9QAu9Hmnv84%B5u+M<``Fc0V#FO{ft^)Q{e<;-(QS{h`J4w7xBhtyA=G z4?>ouQhXu>oIjICS6LW*PxCU4!q4-(7e0UFujhY0fFO7J8xLt8mDZuL9#tTbb>4O~ z2Zz&|!xek*_8hk6%}J9|gTAs%xMGNtPpN}K)1vaqCb-y(59FPgob84v_ISu*J9V*%=79%J@$a&9#s1k&RMN2e=x4$1@!H)y zd9!CnuUjuoP^z0cvlPD}?9E$OPu4HUW!>-)heJOyKKQVa<;pi_vZCqb62XU zSVq>aB;tGV46g!7OCL|pmN=p45!tDz%$4Os-ghrY%r|hSni_saFj&diZXPg^9*ctK z(i;L#V595f%vb4#LjyGUCJodBe7f(+=PUJPZZ4gjpt*}H_%!D7vSA?w@ULtwXNJB) zUJgHw2C}{CGy5koM9Ji2H|Mg_s^$uCP~_&-jac*Jyq2}I+>iByZgSfbocEYdo_AR< z9*~fK-*K>(d)>=!KyvRjH7R2us@_~zE99eCV=tmn|^f=-buPDA_8g9 zVH#gf>;8zAw|<*??#cG;bw{Ks-e(;wx-Zn_6wI0aU{|{%aCL>6`!nxkLE|=G=%|uu zbYX|7HFTUrM(Icqn(wBSyxLVXln^rz{YEvbdQv;qJKTI{U-!i-4%l zqvn2?gyDQr_IV{&iudjIv$iK6s_PPIG-vwqlI!do3#!`6BSZ8J&+m0K!8ktfL@RF2 zs!Y?~nQJqD;d9m#e_iABoKrMscgwW*HMNa^=V~j3(anbqU7h>#>Ivoc$~cE{&!wDh zllZIO75c-268n#YZ}xML7*U1W44_9-{QG&noj*f;*5~UVHazidZ~GyuS4~H233538 zSV!M80xJ&Q3p(=3Q|2o7M%FvDq zJJU$fbnNLz6;v_G3m0%$+7i>&M&e1wH%b3MHkTSIrj7IG>Qd#i(-0z9U_(>(A*leAn^GkP*F@uL-8U9N zjBKJdm6mVV78tBj>VEu}N6TS{ps|;|a-ZRO#9{)+p0p!0S$hXDo6lJ5cfSI0T?NMc z=&7?zrs8VuoEDZ_RO?&8be))U`sKB=TG5wLhNRin!#W$2fpPPs4v)R+1>Eqimb8uO zaZgMOiZ!b4?~_0$+0KXT=qoOU~d*) zR>#tM73YX)M07GBD-rIb(SU% z)8gIRX`4ywVMkgTgH47#V!0f~R(i=EkAh=02D!B;7|p0IdFH;kJ}Zr(kMB+zoDaP) z|Dbnzla_WWW+)y;o1dH*B}m3J^aFs(Ghd9gv1g*GNu!mWY;0G3Ipc`-x!M|jdZgxO zbpX%1G9P|jS;iKE8^bJH@(&1)aUF6556V9cTFWtYY22-urogNur7Jau+4h2=v!**N zd+k{FFs=>}AEVHN5OqOGgrr%|F`1#Qr?Rc+8xQB2%Olnm?LvQ?H9bHMXaWvTw1G{3 zBGu`+jLne!G)_GJLe1?M_emtuCF#ma(gqyWCYu{LY9n^8H~G&J&BrOrD+U5Dkz4{S zQ5aFRO*O?q;Q6e5MiWo_@!`_3bQBFCS@Vp%$i7r+eO=_MCu+AQJ?>URqJ<<2b9@kY z0Z}MV1&OZShwl64*IdpDuHh%*g_zKv(_h3!ESdAarz|TBZM`ozre1Vs+pJ%!RyLve zvD!x*o8$JDb_dt8u&b{=(3}J9yn^M}yP0Q!;-|q_2biPQVL~tF^N6}=&W{944L&s7 zHFc~&w_^Qi6UYRplgXl0RzVIyk)eT&?UxU?Uxxb3J2JIA!B&YRkmgW4Wp@=wF`Tf* zPMewVAXTp=))F0`rexrg4WsjuHR5uXzDt>js0WsAB0WkoY4Lp$=_r0QbRg2hVwn0; zK8PkZ16i0XRI=BQ1u`(b>V_A6;8%YWn8I~r?#Uu&t@~ZXr*s8s z+U|a`k;HF5wy5DG3Gz$*Y^ocW#PFck$&j6<3(l><5&!V~uA<7D?x+e>_KhabV!&2o z>O~RlRIpLcrzQ)S5YugWT7c9xlV;k(QRzPD5 z?UdGOz0uTY<>QR(65mTGW4u~p5mpN3CiZG2QMN2;9j#O{wTtmv>nXGQP z1m>~-K#macWOExw>)ek#6JK6~7iyj?WIrDXS(Fqbdd_pSN&c4iytuI_pLI`1gtoE2jS~ri zFxN;qtHhjtUGTDllSA)umNjKn-{m3I1~|B|Bi8z`p>KXEsGM7xPfUuJ>#iA`c7IH- zQ1aGZnjhMnNNPuPBo`$sEudxPg|GSOc_t&@J_m09WVw@$h1IBKJhN_Dw-mM4Nz}Wd zmSt@s&u zW_Tm2gWPPJEpJTM(IwWpY*ThL3&68xxJ{(KYS{xiTeZCni}BCJ&E^~Ei-!eAdxb)C zC=AUG;$b|woJB3pAI5AWG$IA#xbW{Bc&iG~=jO3BX47VP(<@m>Fhp}A5s(aaB#;i< zzS8@AllV19Eu%3gP4#vxClQ5?O*9U%s;ggk{G*_NK#lX3L>AVxVG8C9@GtoDCr?k_ zG!`^_WGv$M4YM^ElLB-`VVSGQZa!J`bWJlUH=c{i9+@-C{q6w%qq ziS^;}ac%!wVf(SEVF8euj?V0CwKYQ&+y%|<7CR2ri+gqXl%WR%D5{7%nkX_ilr&Sw zh{-bUBz#Qma{)*1D=Mrn41RuKK5V)GX0d&Ru>LX8*aCXF?7yS$cSx(OE(HNP*276}c8mLoogY~ol$dxeMOiQi&L@n=S!!zFW(NYef=$(D z$yI6zi6vBUT#JfRw}55rziEVuAhkb&M)Pp7lLblL5iL3nS2d+o2ED#WlFut^0bjaXo`FWH>y)DCn|l_(%^8kz0(`sCfXQBNj09jWBqy7KG}T zEOG$6qoJpg9fT_Y%I$)7shNQa)bN9~WrIagOXy}_DNmD{B!b0y00U#*8}?mkG@q>< zL##o9@U~F%%0uCgu@*^rzCeKQsF-^!Qoz?A9lybY9&SyZiB@Q26Na??h=|z3K2?!I z)62uDQxJ+gp;eC+hntD`;tg?f$x zEV$?v11}=iB891QsG@eg%SLE`U1hJ5g#JGroNF2D$U6ka{Mn-e)$+Ou?lRf!Fj~Y-?5ikt_<v)cedMq#?@{5!v2b70FK;#&RS>*%_m3}BpQtALR*)`65r$j*dTG>n%b4L1<^+=r zj;p_3>qMy<8ph1VA*Q799=I}n`3qiLUJf9QH6AZ2I)1~9JTiRlzRRW?UWIjA{X`tVU8h?Q(DuCLth*1pKX5q9Ft)Fd)rq zizC2Fah;Ry#nLkIkaB*F8^`H&7yh&86cSF=Ysc=OnfhLsaG9A*3@*oH7!sHd)W&U+b0DGt-I;bq9nKpLB4 zcj?3(zQ_v`ggq8n{Dxgz0r^bIv%td(ZTpNwjuG%Kd&-{9sN>=60DsCE$YdVjF3r7X zS^P!Eb>V2I*hXH$(!W~&Czu+hp_97-rQ8q));2-v(8gddk6pJXNUTWCsjKOSR$KqG zIrW212t%<#Hh$f@0I^W;l$E^Pp=>>Aciji7IW;{Rd;l!tkYiqea7AgiH#VA!p0`o& zUg{3%yR2xHe3!$Gh{@bUodj@6&{E@4G^X7O;Ix`0kd_IvR<)DBFl9e*k^)mT2y(uA zm&#_wGyimi`|>p|PG2dyAE%)qJGrgrG(dbfwq!-p!^hXZ{kt6z<&dtwMRG!8S4>Ej zibfrQL++_{C1c-rEyMHitn z@`C=x@FR%C*f`-}N1bf7k7Zf5e7a|PO|g`Af9QL99X`>sF2_*PexFsqC9o{?*T%@T zB%?_%bmNl`f@$r5hybHz^&?>5!x+xc$!(mGFK&QQZf@@H@p1H;)^Da0&n}aGD#`Ig z25nxdS5@grg*Ye^IT<+*hsC``%|lb-V-ZSsT-y!~vDQuCv7sYP{98vY`LSGjVRE`( z;p=OEjYvum+M)?q=U;j+L|bhdjD}g)c{U}ph+Pv9vbVYkwrnX1Iq6^SQIIB-4Y92S zQUmIrzj|gC#E802xl%pm9au}Ben&j9W&XH(^zNE#-ed+&z^jI0hK(q?GIqL+9Fy^1 zyt#G78=Anxeb7_ZqDXWrN^X(?3!;Q>%6{RZtjgysdykQKwsmW@wJStZpxMQ-*f_$y zO3kt@ZMO_6Eg(F5wAc=>yD7fjVa7j~{A;w-0OkB(m;@5RIx!}}TDbp0Q3Gq$yp1lH zC4hywhJqY`$73yB`@amp|KAq>2ZLWdP8YP{Rwj=&L|?~e5bh5Wb8N1{1u@W|A7LvZ z$H$7G7dLEihCApQl-<+K_nX4#JLnCSE1(%Su2 z7?{Icmhd^kPf*U7^ufzbli}Z@TQFe*b-unl9vmO{Yj;0rj%IQW?JM3tT}@nE43Py} zFyoInXBHnone6RWD-&n>=LA)f%swg~`|qSK6j}S=6UzHuTX|v7$Y5sF!9svh-VSaj zl22pmP4Bv<8O`RM*pD933A2zvam46T-Pc_VoL{EpXn&_XeO0Jnp3iT^Ts{o8QkLA0 zVEOs+sB{MvUL7qk0vlJ9BO`KngG#qG#zKc@k?kTcH2LpM)ynVTeTM%2lS;4L9A8Rd z_XF3N;L{vfBup^_BUmnGIg1c_-N8(CREI>v`p$g9s1ru^y}lL+{b8Nb-a9ymWxgCk zVtR67rm&c@QDRPkQo1vfr(~7lrRUqL+n}e+I;rTfej{-k^?whclJvj*F&nvj7}h;7 zD@N-iMQ~kOu>oOJFtb@_*S_rS1^pWB8GnnR1Kkz}C*&yGVVSvUiIXL89clDFD!+Fx zb9zvKGJsMb_|ir-#VT$NHfS1QY>t-JdGAFojf9e_KX{@L;a8{e^tW};7CRXrzgMsec)g2{g9_+}>=CG&RMPV9|YB8?Dl*oc=+-G z_)eU>5HNr)aOxpwIR?(+{zZR|nx;A~)H&k&Sti=bLD?(F7po;$l0~{;B0dz{v@v>uc-KVCX-HYA zMB_8}$&mSlG&S+$h=SMY28CSZc^FrmLkK8Bvt~t}5@DlUa-Yz30;s9t-;jw7ShT)T%b0NBmL|Co(fWF`W zVoo4Nb)hD#G)M%%U=cI}!BLd`-DJ>% zwF$|=02n|+-$W^FIqbdkD@uUw2YQ?7<6SL!NCWo?Gni*_4yquNaE7% zR$G=|so4_Mx6=G{@>?<29CmbD8t{oQEKK$pt|r?lv|;XG0|Z8#iC>IH4%-mwvd4Ty zWZlZMW2FL9oF&or*HMKY+%Ub<$tL=J!cjTF9(>AWWf4e>YF02LqUK3$1aqwcP%5Rs zOV=|L19dUldFwRTYcJ4zwJSgv1;bXp$M}5tmk&N-U3nbjU<&@r=4QZi16r(LK0@nY zzg#r`;+ZTg5AFS@Ed3(~rQ&+?%p8Wl+S$B|=J0Pixo6@0akSdIE_>JgnYEtS$)(KhKuaJVJD zKH(8r7T?|8ap2qe`Jh6pdYez~gi-03KgUx2B>fe~JTPm_co~J>YN&GGB=!Y%0KnuB zzyRm>6FZ~}h-c~cqY>yAm3)p)8ynVZ#ct47zDoL=F ziJd%EmY{O-I(5cgDFu}kvqwq^0*T@QbUS#$A%YqZ_#sB@7xEFxa>&E&?Wy(a9eh`} zy+G7?W+YBNbcQesoLi2BDFvzx(Lmc>xr{Y%b^KbIoCGYu z?_dczIp_aI8uZ@UBJrSkJSu;LWr@1!IuFKjhuyM80~8VG9+SgAa%qCtQZ|TvN?o zsn*dyz(_4b*Ne$oQE4e+yx?x1kyuF7{ZqlA2K+em*q8$*+8q_{e}ww2=7k zhX^CUW95p+_KuffH#QMZ3!(D5yB+3*j_@Q{ZN19`DgHG~0?h&tNCWp^DK<(BEID25 zg^!LL11^-pe2*9S+vzCAwh*@RpdJlrF`#Yvy7yr-IU6zz_gMhmPYSqz?+mbfpnfwh z-~Bf56D-ZlQn!3EEhJ~t!~#YYKp>DFR^%WtYRrTS0_0h`rm+H`t*K(_JOB;@{s}im zMdYxrNLOtt)t!;L*8`aSsgBq745uQgXv_1 zzyP3aarIyF3{ER_0YO3TB*?2R?3IKw)!!wn{H{Q=QYoJz$~A7ZDJ1J z*geA@7ZM)QO!aImDc}h^g(KOijS{4EC7*~rMBFjbIs7S=F&7&Z{smJ-s%S8q&{b$X zhBfu)PKr`j8rwYt^G!3gE#8m(?HF zI?Gr~2hzqGK@cKG>i67lG)55y-t*;O#XPDEeo-R2@lGGUnUxM0it|+Q7Wy7zri7L9 zN4>VTtK4oh`FckJW~jEtzHYBX6!{4aU0OjwtbA4W<6y%yV=eh+Y=BFpOD3U_?W*^X z(0mL>P8ufBKbH-jmBSf>sVT;{b#aEGB09{9&_DfWBW5uc8d+xkAmrf;XsPlaS~_?* zEL;o}S|VJO5Wx0JZX5*W@DNACO&wbJw*VTdT5`;H z@V29|_((Hhv#}z8r?yXo@g=N(AF9s*s?F@t2gR1$^$@eW3KNpLC0{4yo$ zKa7gK$AZ;ks+K}MSl$YfgcWVRr{bo6r5y`a+S!5_%m0;jK3M$^>Q}b?N5kJ^-Mw}k XvCc$tSq#CRg1z}9tt3?~VI1^d^qGiR diff --git a/src/demo/app.js b/src/demo/app.js index 5cc25ea..3dcfbd9 100644 --- a/src/demo/app.js +++ b/src/demo/app.js @@ -3,25 +3,25 @@ angular.module('demo', [ ]) .controller('DemoCtrl', ['$scope', function ($scope) { - // the selector config - $scope.things = [{ - key: 't1', - name: 'Thing 1' + $scope.flavourList = [{ + key: 'f1', + name: 'Strawberry' }, { - key: 't2', - name: 'Thing 2' + key: 'f2', + name: 'Classico' }, { - key: 't3', - name: 'Thing 3' + key: 'f3', + name: 'Mint' }]; - $scope.items = []; + $scope.chosenFlavours = []; - $scope.onThingsSelected = function(selectedItem) { - $scope.items = selectedItem; + $scope.onFlavourSelected = function(selectedItem) { + $scope.chosenFlavours = selectedItem; }; + // relates to tabs and example code $scope.demo1 = { markup: true, javascript: false diff --git a/src/demo/index.html b/src/demo/index.html index 57e3360..5fdcb7f 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -46,6 +46,14 @@ .btn-grey:focus, .btn-grey:active:focus { outline: 0; } + + /** + * overwriting the default max-width so that we can see more + * of the value names. + */ + .multiselect-container .filter-wrap .filter-values { + max-width: 120px; + } @@ -57,14 +65,21 @@

Sonalake Multi-Select

Basic Demo

This is a basic demo set up. It gives a quick example of how to use so-multiselect.

-
+
  • -
    +
    • -

  • Items selected: {{items.length}}

+
+

Chosen Flavours: {{chosenFlavours.length}}

+
    +
  • + {{item.name}} +
    • +
+
@@ -84,31 +99,31 @@

Basic Demo

<div so-multiselect
-     items="things"
-     name="Thing"
-     on-selected="onThingsSelected(selectedItems)"
+     items="flavourList"
+     name="Flavours"
+     on-selected="onFlavourSelected(selectedItems)"
      button-class="btn-grey"
 ></div>
-<p>Items selected: <strong>{{items.length}}</strong></p>
+<p>Chosen Flavours: <strong>{{chosenFlavours.length}}</strong></p> 
.controller('DemoCtrl', ['$scope', function ($scope) {
     // the selector config
-    $scope.things = [{
-        key: 't1',
-        name: 'Thing 1'
+    $scope.flavourList = [{
+        key: 'f1',
+        name: 'Strawberry'
     }, {
-        key: 't2',
-        name: 'Thing 2'
+        key: 'f2',
+        name: 'Classico'
     }, {
-        key: 't3',
-        name: 'Thing 3'
+        key: 'f3',
+        name: 'Mint'
     }];
 
-    $scope.items = [];
+    $scope.chosenFlavours = [];
 
-    $scope.onThingsSelected = function(selectedItem) {
-        $scope.items = selectedItem;
+    $scope.onFlavourSelected = function(selectedItem) {
+        $scope.chosenFlavours = selectedItem;
     };
 }])