diff --git a/angular-dropdowns.css b/angular-dropdowns.css index 34343bf..c76c310 100644 --- a/angular-dropdowns.css +++ b/angular-dropdowns.css @@ -98,6 +98,11 @@ background: #f3f8f8; } +.wrap-dd-select .dropdown li.selected { + background-color: #ffaaaa; + border-radius: 7px; +} + .wrap-dd-select .dropdown:after { content: ""; width: 0; @@ -167,6 +172,11 @@ padding: 10px 0; } +.wrap-dd-menu .dropdown li.selected { + background-color: #ffaaaa; + border-radius: 7px; +} + .wrap-dd-menu .dropdown li a { display: block; padding: 10px; diff --git a/angular-dropdowns.js b/angular-dropdowns.js index 94c3938..f4344fd 100644 --- a/angular-dropdowns.js +++ b/angular-dropdowns.js @@ -9,19 +9,21 @@ dd.run(['$templateCache', function ($templateCache) { $templateCache.put('ngDropdowns/templates/dropdownSelect.html', [ '
', - '{{dropdownModel[labelField]}}', + '{{dropdownModel[labelField]}}', + '{{list(dropdownModel)}}', '', '
' ].join('')); $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [ - '
  • ', + '
  • ', '', + ' dropdown-menu-item="item"', + ' dropdown-menu-item-multiple="dropdownMultiple">', '
  • ', '' ].join('')); $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [ - '
  • ', + '
  • ', '', - '{{dropdownModel[labelField]}}', + '{{dropdownModel[labelField]}}', + '{{list(dropdownModel)}}', '', '' ].join('')); $templateCache.put('ngDropdowns/templates/dropdownSelectItem.html', [ - '
  • ', + '
  • ', '', + ' dropdown-menu-item="item"', + ' dropdown-menu-item-multiple="dropdownMultiple">', '
  • ', '' ].join('')); $templateCache.put('ngDropdowns/templates/dropdownMenuItem.html', [ - '
  • ', + '
  • ', '','{{dropdownModel[labelField]}}','",""].join("")),e.put("ngDropdowns/templates/dropdownSelectItem.html",["
  • ",'',"{{dropdownSelectItem[dropdownItemLabel]}}","",'',"{{dropdownSelectItem[dropdownItemLabel]}}","","
  • "].join("")),e.put("ngDropdowns/templates/dropdownMenu.html",['"].join("")),e.put("ngDropdowns/templates/dropdownMenuItem.html",["
  • ",'',"{{dropdownMenuItem[dropdownItemLabel]}}","",'',"{{dropdownMenuItem[dropdownItemLabel]}}","","
  • "].join(""))}]),n.directive("dropdownSelect",["DropdownService",function(e){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownItemLabel:"@",dropdownOnchange:"&",dropdownDisabled:"="},controller:["$scope","$element",function(d,n){d.labelField=d.dropdownItemLabel||"text",e.register(n),this.select=function(e){o.equals(e,d.dropdownModel)||(d.dropdownModel=e),d.dropdownOnchange({selected:e})},n.bind("click",function(o){o.stopPropagation(),d.dropdownDisabled||e.toggleActive(n)}),d.$on("$destroy",function(){e.unregister(n)})}],templateUrl:"ngDropdowns/templates/dropdownSelect.html"}}]),n.directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(e,o,d,n){e.selectItem=function(){e.dropdownSelectItem.href||n.select(e.dropdownSelectItem)}},templateUrl:"ngDropdowns/templates/dropdownSelectItem.html"}}]),n.directive("dropdownMenu",["$parse","$compile","DropdownService","$templateCache",function(e,d,n,t){return{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownItemLabel:"@",dropdownOnchange:"&",dropdownDisabled:"="},controller:["$scope","$element",function(e,r){e.labelField=e.dropdownItemLabel||"text";var l=o.element(t.get("ngDropdowns/templates/dropdownMenu.html"));l.data("$dropdownMenuController",this);var i=d(l)(e),p=d(o.element('
    '))(e);r.replaceWith(p),p.append(r),p.append(l),n.register(i),this.select=function(d){o.equals(d,e.dropdownModel)||(e.dropdownModel=d),e.dropdownOnchange({selected:d})},r.bind("click",function(o){o.stopPropagation(),e.dropdownDisabled||n.toggleActive(i)}),e.$on("$destroy",function(){n.unregister(i)})}]}}]),n.directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(e,o,d,n){e.selectItem=function(){e.dropdownMenuItem.href||n.select(e.dropdownMenuItem)}},templateUrl:"ngDropdowns/templates/dropdownMenuItem.html"}}]),n.factory("DropdownService",["$document",function(e){var d=e.find("body"),n={},t=[];return d.bind("click",function(){o.forEach(t,function(e){e.removeClass("active")})}),n.register=function(e){t.push(e)},n.unregister=function(e){var o;o=t.indexOf(e),o>-1&&t.splice(o,1)},n.toggleActive=function(e){o.forEach(t,function(o){o!==e&&o.removeClass("active")}),e.toggleClass("active")},n}])}(window,window.angular); \ No newline at end of file +!function(e,o,d){"use strict";var n=o.module("ngDropdowns",[]);n.run(["$templateCache",function(e){e.put("ngDropdowns/templates/dropdownSelect.html",['
    ','{{dropdownModel[labelField]}}','{{list(dropdownModel)}}','","
    "].join("")),e.put("ngDropdowns/templates/dropdownSelectItem.html",["
  • ",'',"{{dropdownSelectItem[dropdownItemLabel]}}","",'',"{{dropdownSelectItem[dropdownItemLabel]}}","","
  • "].join("")),e.put("ngDropdowns/templates/dropdownMenu.html",['"].join("")),e.put("ngDropdowns/templates/dropdownMenuItem.html",["
  • ",'',"{{dropdownMenuItem[dropdownItemLabel]}}","",'',"{{dropdownMenuItem[dropdownItemLabel]}}","","
  • "].join(""))}]),n.directive("dropdownSelect",["DropdownService",function(e){return{restrict:"A",replace:!0,scope:{dropdownSelect:"=",dropdownModel:"=",dropdownItemLabel:"@",dropdownOnchange:"&",dropdownDisabled:"=",dropdownMultiple:"=",dropdownMultipleStandardLabel:"@"},controller:["$scope","$element",function(d,n){d.labelField=d.dropdownItemLabel||"text",d.dropdownMultiple&&(d.dropdownModel=[]),e.register(n),this.select=function(e){if(o.equals(e,d.dropdownModel)||d.dropdownMultiple||(d.dropdownModel=e),d.dropdownMultiple){for(var n=-1,t=0;t'))(e);l.replaceWith(i),i.append(l),i.append(r),e.dropdownMultiple&&(e.dropdownModel=[]),n.register(p),this.select=function(d){if(o.equals(d,e.dropdownModel)||e.dropdownMultiple||(e.dropdownModel=d),e.dropdownMultiple){for(var n=-1,t=0;t-1&&t.splice(o,1)},n.toggleActive=function(e){o.forEach(t,function(o){o!==e&&o.removeClass("active")}),e.toggleClass("active")},n}])}(window,window.angular); \ No newline at end of file diff --git a/example/app.js b/example/app.js index 1118277..adf4470 100644 --- a/example/app.js +++ b/example/app.js @@ -26,6 +26,29 @@ app.controller('AppCtrl', function($scope) { text: "Select an Option" }; + $scope.ddSelectOptions2 = [ + { + text: 'Label', + divider: true + }, { + text: 'Option1', + value: 'one', + iconCls: 'someicon' + }, { + text: 'Option2', + someprop: 'somevalue' + }, { + divider: true + }, { + text: 'Option4', + href: 'http://www.google.com' + } + ]; + + $scope.ddSelectSelected2 = { + text: "Select an Option" + }; + $scope.ddMenuOptions = [ { text: 'Label', @@ -74,4 +97,18 @@ app.controller('AppCtrl', function($scope) { ]; $scope.ddMenuSelected3 = {}; + + $scope.ddMenuOptions4 = [ + { + text: 'Option4-1' + }, { + text: 'Option4-2' + }, { + text: 'Option4-3' + }, { + text: 'Option4-4' + } + ]; + + $scope.ddMenuSelected4 = {}; }); diff --git a/example/index.html b/example/index.html index 657d2a8..4448e81 100644 --- a/example/index.html +++ b/example/index.html @@ -19,10 +19,16 @@

    Dropdown Select

    - + +

    Single

    You have selected: {{ddSelectSelected}}

    +

    Multiple

    +

    You have selected: {{ddSelectSelected2}}

    +
    + +

    Dropdown Menu

    @@ -46,6 +52,11 @@

    On an Anchor

    Menu +

    Multiple selections

    +

    You have selected: {{ddMenuSelected4}}

    +