diff --git a/bower.json b/bower.json index 51b36cde..3eeb8e55 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angularjs-dropdown-multiselect", - "version": "1.5.2", + "version": "1.5.5", "authors": [ "Dotan Simha " ], diff --git a/dist/angularjs-dropdown-multiselect.min.js b/dist/angularjs-dropdown-multiselect.min.js index 3ea0d3fc..ec8ed75f 100644 --- a/dist/angularjs-dropdown-multiselect.min.js +++ b/dist/angularjs-dropdown-multiselect.min.js @@ -1 +1 @@ -"use strict";var directiveModule=angular.module("angularjs-dropdown-multiselect",[]);directiveModule.directive("ngDropdownMultiselect",["$filter","$document","$compile","$parse",function($filter,$document){return{restrict:"AE",scope:{selectedModel:"=",options:"=",extraSettings:"=",events:"=",searchFilter:"=?",translationTexts:"=",groupBy:"@"},template:function(element,attrs){var checkboxes=attrs.checkboxes?!0:!1,groups=attrs.groupBy?!0:!1,template='
';template+='',template+="",template+="
",element.html(template)},link:function($scope,$element,$attrs){function getFindObj(id){var findObj={};return""===$scope.settings.externalIdProp?findObj[$scope.settings.idProp]=id:findObj[$scope.settings.externalIdProp]=id,findObj}function clearObject(object){for(var prop in object)delete object[prop]}var $dropdownTrigger=$element.children()[0];$scope.toggleDropdown=function(){$scope.open=!$scope.open},$scope.checkboxClick=function($event,id){$scope.setSelectedItem(id),$event.stopImmediatePropagation()},$scope.externalEvents={onItemSelect:angular.noop,onItemDeselect:angular.noop,onSelectAll:angular.noop,onDeselectAll:angular.noop,onInitDone:angular.noop,onMaxSelectionReached:angular.noop},$scope.settings={dynamicTitle:!0,scrollable:!1,scrollableHeight:"300px",closeOnBlur:!0,displayProp:"label",idProp:"id",externalIdProp:"id",enableSearch:!1,selectionLimit:0,showCheckAll:!0,showUncheckAll:!0,closeOnSelect:!1,buttonClasses:"btn btn-default",closeOnDeselect:!1,groupBy:$attrs.groupBy||void 0,groupByTextProvider:null,smartButtonMaxItems:0,smartButtonTextConverter:angular.noop},$scope.texts={checkAll:"Check All",uncheckAll:"Uncheck All",selectionCount:"checked",selectionOf:"/",searchPlaceholder:"Search...",buttonDefaultText:"Select",dynamicButtonTextSuffix:"checked"},$scope.searchFilter=$scope.searchFilter||"",angular.isDefined($scope.settings.groupBy)&&$scope.$watch("options",function(newValue){angular.isDefined(newValue)&&($scope.orderedItems=$filter("orderBy")(newValue,$scope.settings.groupBy))}),angular.extend($scope.settings,$scope.extraSettings||[]),angular.extend($scope.externalEvents,$scope.events||[]),angular.extend($scope.texts,$scope.translationTexts),$scope.singleSelection=1===$scope.settings.selectionLimit,$scope.singleSelection&&angular.isArray($scope.selectedModel)&&0===$scope.selectedModel.length&&clearObject($scope.selectedModel),$scope.settings.closeOnBlur&&$document.on("click",function(e){for(var target=e.target.parentElement,parentFound=!1;angular.isDefined(target)&&null!==target&&!parentFound;)_.contains(target.className.split(" "),"multiselect-parent")&&!parentFound&&target===$dropdownTrigger&&(parentFound=!0),target=target.parentElement;parentFound||$scope.$apply(function(){$scope.open=!1})}),$scope.getGroupTitle=function(groupValue){return null!==$scope.settings.groupByTextProvider?$scope.settings.groupByTextProvider(groupValue):groupValue},$scope.getButtonText=function(){if($scope.settings.dynamicTitle&&($scope.selectedModel.length>0||angular.isObject($scope.selectedModel)&&_.keys($scope.selectedModel).length>0)){if($scope.settings.smartButtonMaxItems>0){var itemsText=[];return angular.forEach($scope.options,function(optionItem){if($scope.isChecked($scope.getPropertyForObject(optionItem,$scope.settings.idProp))){var displayText=$scope.getPropertyForObject(optionItem,$scope.settings.displayProp),converterResponse=$scope.settings.smartButtonTextConverter(displayText,optionItem);itemsText.push(converterResponse?converterResponse:displayText)}}),$scope.selectedModel.length>$scope.settings.smartButtonMaxItems&&(itemsText=itemsText.slice(0,$scope.settings.smartButtonMaxItems),itemsText.push("...")),itemsText.join(", ")}var totalSelected;return totalSelected=$scope.singleSelection?null!==$scope.selectedModel&&angular.isDefined($scope.selectedModel[$scope.settings.idProp])?1:0:angular.isDefined($scope.selectedModel)?$scope.selectedModel.length:0,0===totalSelected?$scope.texts.buttonDefaultText:totalSelected+" "+$scope.texts.dynamicButtonTextSuffix}return $scope.texts.buttonDefaultText},$scope.getPropertyForObject=function(object,property){return angular.isDefined(object)&&object.hasOwnProperty(property)?object[property]:""},$scope.selectAll=function(){$scope.deselectAll(!1),$scope.externalEvents.onSelectAll(),angular.forEach($scope.options,function(value){$scope.setSelectedItem(value[$scope.settings.idProp],!0)})},$scope.deselectAll=function(sendEvent){sendEvent=sendEvent||!0,sendEvent&&$scope.externalEvents.onDeselectAll(),$scope.singleSelection?clearObject($scope.selectedModel):$scope.selectedModel.splice(0,$scope.selectedModel.length)},$scope.setSelectedItem=function(id,dontRemove){var findObj=getFindObj(id),finalObj=null;if(finalObj=""===$scope.settings.externalIdProp?_.find($scope.options,findObj):findObj,$scope.singleSelection)return clearObject($scope.selectedModel),angular.extend($scope.selectedModel,finalObj),$scope.externalEvents.onItemSelect(finalObj),void($scope.settings.closeOnSelect&&($scope.open=!1));dontRemove=dontRemove||!1;var exists=-1!==_.findIndex($scope.selectedModel,findObj);!dontRemove&&exists?($scope.selectedModel.splice(_.findIndex($scope.selectedModel,findObj),1),$scope.externalEvents.onItemDeselect(findObj)):!exists&&(0===$scope.settings.selectionLimit||$scope.selectedModel.length<$scope.settings.selectionLimit)&&($scope.selectedModel.push(finalObj),$scope.externalEvents.onItemSelect(finalObj)),$scope.settings.closeOnSelect&&($scope.open=!1)},$scope.isChecked=function(id){return $scope.singleSelection?null!==$scope.selectedModel&&angular.isDefined($scope.selectedModel[$scope.settings.idProp])&&$scope.selectedModel[$scope.settings.idProp]===getFindObj(id)[$scope.settings.idProp]:-1!==_.findIndex($scope.selectedModel,getFindObj(id))},$scope.externalEvents.onInitDone()}}}]); \ No newline at end of file +"use strict";var directiveModule=angular.module("angularjs-dropdown-multiselect",[]);directiveModule.directive("ngDropdownMultiselect",["$filter","$document","$compile","$parse",function($filter,$document,$compile,$parse){return{restrict:"AE",scope:{selectedModel:"=",options:"=",extraSettings:"=",events:"=",searchFilter:"=?",translationTexts:"=",groupBy:"@"},template:function(element,attrs){var checkboxes=attrs.checkboxes?!0:!1,groups=attrs.groupBy?!0:!1,template='
';template+='',template+="",template+="
",element.html(template)},link:function($scope,$element,$attrs){function getFindObj(id){var findObj={};return""===$scope.settings.externalIdProp?findObj[$scope.settings.idProp]=id:findObj[$scope.settings.externalIdProp]=id,findObj}function clearObject(object){for(var prop in object)delete object[prop]}var $dropdownTrigger=$element.children()[0];$scope.toggleDropdown=function(){$scope.open=!$scope.open},$scope.checkboxClick=function($event,id){$scope.setSelectedItem(id),$event.stopImmediatePropagation()},$scope.externalEvents={onItemSelect:angular.noop,onItemDeselect:angular.noop,onSelectAll:angular.noop,onDeselectAll:angular.noop,onInitDone:angular.noop,onMaxSelectionReached:angular.noop},$scope.settings={dynamicTitle:!0,scrollable:!1,scrollableHeight:"300px",closeOnBlur:!0,displayProp:"label",idProp:"id",externalIdProp:"id",enableSearch:!1,selectionLimit:0,showCheckAll:!0,showUncheckAll:!0,closeOnSelect:!1,buttonClasses:"btn btn-default",closeOnDeselect:!1,groupBy:$attrs.groupBy||void 0,groupByTextProvider:null,smartButtonMaxItems:0,smartButtonTextConverter:angular.noop,showAllCount:!1},$scope.texts={checkAll:"Check All",uncheckAll:"Uncheck All",selectionCount:"checked",selectionOf:"/",searchPlaceholder:"Search...",buttonDefaultText:"Select",dynamicButtonTextSuffix:"checked",allSelectedText:"All selected"},$scope.searchFilter=$scope.searchFilter||"",angular.isDefined($scope.settings.groupBy)&&$scope.$watch("options",function(newValue){angular.isDefined(newValue)&&($scope.orderedItems=$filter("orderBy")(newValue,$scope.settings.groupBy))}),angular.extend($scope.settings,$scope.extraSettings||[]),angular.extend($scope.externalEvents,$scope.events||[]),angular.extend($scope.texts,$scope.translationTexts),$scope.singleSelection=1===$scope.settings.selectionLimit,$scope.singleSelection&&angular.isArray($scope.selectedModel)&&0===$scope.selectedModel.length&&clearObject($scope.selectedModel),$scope.settings.closeOnBlur&&$document.on("click",function(e){for(var target=e.target.parentElement,parentFound=!1;angular.isDefined(target)&&null!==target&&!parentFound;)_.contains(target.className.split(" "),"multiselect-parent")&&!parentFound&&target===$dropdownTrigger&&(parentFound=!0),target=target.parentElement;parentFound||$scope.$apply(function(){$scope.open=!1})}),$scope.getGroupTitle=function(groupValue){return null!==$scope.settings.groupByTextProvider?$scope.settings.groupByTextProvider(groupValue):groupValue},$scope.getButtonText=function(){if($scope.settings.dynamicTitle&&($scope.selectedModel.length>0||angular.isObject($scope.selectedModel)&&_.keys($scope.selectedModel).length>0)){if($scope.settings.smartButtonMaxItems>0){var itemsText=[];return angular.forEach($scope.options,function(optionItem){if($scope.isChecked($scope.getPropertyForObject(optionItem,$scope.settings.idProp))){var displayText=$scope.getPropertyForObject(optionItem,$scope.settings.displayProp),converterResponse=$scope.settings.smartButtonTextConverter(displayText,optionItem);itemsText.push(converterResponse?converterResponse:displayText)}}),$scope.settings.showAllCount&&$scope.selectedModel.length===$scope.options.length?$scope.texts.allSelectedText:($scope.selectedModel.length>$scope.settings.smartButtonMaxItems&&(itemsText=itemsText.slice(0,$scope.settings.smartButtonMaxItems),1===$scope.settings.smartButtonMaxItems||$scope.settings.showAllCount||itemsText.push("...")),itemsText.join(", "))}var totalSelected;return totalSelected=$scope.singleSelection?null!==$scope.selectedModel&&angular.isDefined($scope.selectedModel[$scope.settings.idProp])?1:0:angular.isDefined($scope.selectedModel)?$scope.selectedModel.length:0,0===totalSelected?$scope.texts.buttonDefaultText:!$scope.singleSelection&&$scope.settings.showAllCount&&totalSelected===$scope.options.length?$scope.texts.allSelectedText:totalSelected+" "+$scope.texts.dynamicButtonTextSuffix}return $scope.texts.buttonDefaultText},$scope.getPropertyForObject=function(object,property){return angular.isDefined(object)&&object.hasOwnProperty(property)?object[property]:""},$scope.selectAll=function(){$scope.deselectAll(!1),$scope.externalEvents.onSelectAll(),angular.forEach($scope.options,function(value){$scope.setSelectedItem(value[$scope.settings.idProp],!0)})},$scope.deselectAll=function(sendEvent){sendEvent=sendEvent||!0,sendEvent&&$scope.externalEvents.onDeselectAll(),$scope.singleSelection?clearObject($scope.selectedModel):$scope.selectedModel.splice(0,$scope.selectedModel.length)},$scope.setSelectedItem=function(id,dontRemove){var findObj=getFindObj(id),finalObj=null;if(finalObj=""===$scope.settings.externalIdProp?_.find($scope.options,findObj):findObj,$scope.singleSelection)return clearObject($scope.selectedModel),angular.extend($scope.selectedModel,finalObj),$scope.externalEvents.onItemSelect(finalObj),void($scope.settings.closeOnSelect&&($scope.open=!1));dontRemove=dontRemove||!1;var exists=-1!==_.findIndex($scope.selectedModel,findObj);!dontRemove&&exists?($scope.selectedModel.splice(_.findIndex($scope.selectedModel,findObj),1),$scope.externalEvents.onItemDeselect(findObj)):!exists&&(0===$scope.settings.selectionLimit||$scope.selectedModel.length<$scope.settings.selectionLimit)&&($scope.selectedModel.push(finalObj),$scope.externalEvents.onItemSelect(finalObj)),$scope.settings.closeOnSelect&&($scope.open=!1)},$scope.isChecked=function(id){return $scope.singleSelection?null!==$scope.selectedModel&&angular.isDefined($scope.selectedModel[$scope.settings.idProp])&&$scope.selectedModel[$scope.settings.idProp]===getFindObj(id)[$scope.settings.idProp]:-1!==_.findIndex($scope.selectedModel,getFindObj(id))},$scope.externalEvents.onInitDone()}}}]); \ No newline at end of file diff --git a/pages/javascripts/pages/home/ExampleCtrl.js b/pages/javascripts/pages/home/ExampleCtrl.js index f9fefa6e..59176ddc 100644 --- a/pages/javascripts/pages/home/ExampleCtrl.js +++ b/pages/javascripts/pages/home/ExampleCtrl.js @@ -1,158 +1,178 @@ 'use strict'; angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scope) { - $scope.example1model = []; - $scope.example1data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - - - $scope.example2model = []; - $scope.example2data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example2settings = {displayProp: 'id'}; - - - $scope.example3model = []; - $scope.example3data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}, - {id: 4, label: "Danny"}]; - $scope.example3settings = {displayProp: 'label', idProp: 'label'}; - - $scope.example4model = []; - $scope.example4data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example4settings = {displayProp: 'label', idProp: 'id', externalIdProp: 'myCustomPropertyForTheObject'}; - - $scope.example5model = []; - $scope.example5data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example5settings = {}; - $scope.example5customTexts = {buttonDefaultText: 'Select Users'}; - - $scope.example6model = [{id: 1}, {id: 3}]; - $scope.example6data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example6settings = {}; - - $scope.example7model = []; - $scope.example7data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example7settings = {externalIdProp: ''}; - - $scope.example8model = []; - $scope.example8data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - - $scope.example9model = []; - $scope.example9data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - $scope.example9settings = {enableSearch: true}; - - $scope.example10model = []; - $scope.example10data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - - $scope.example10settings = {selectionLimit: 2}; - - $scope.example12model = {}; - $scope.example12data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Danny"}]; - - $scope.example12settings = {selectionLimit: 1}; - - - $scope.example11model = []; - $scope.example11data = [ - {id: 1, label: "David", gender: 'M'}, - {id: 2, label: "Jhon", gender: 'M'}, - {id: 3, label: "Lisa", gender: 'F'}, - {id: 4, label: "Nicole", gender: 'F'}, - {id: 5, label: "Danny", gender: 'M'}]; - - $scope.example11settings = { - groupByTextProvider: function(groupValue) - { - if (groupValue === 'M') - { - return 'Male'; - } - else - { - return 'Female'; - } - } - }; - - $scope.example13model = []; - $scope.example13data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Lisa"}, - {id: 4, label: "Nicole"}, - {id: 5, label: "Danny"}]; - - $scope.example13settings = { - smartButtonMaxItems: 3, - smartButtonTextConverter: function(itemText, originalItem) { - if (itemText === 'Jhon') { - return 'Jhonny!'; - } - - return itemText; - } - }; - - $scope.example14model = []; - $scope.example14data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Lisa"}, - {id: 4, label: "Nicole"}, - {id: 5, label: "Danny"}, - {id: 6, label: "Dan"}, - {id: 7, label: "Dean"}, - {id: 8, label: "Adam"}, - {id: 9, label: "Uri"}, - {id: 10, label: "Phil"}]; - - $scope.example14settings = { - scrollableHeight: '100px', - scrollable: true - }; - - $scope.example15model = []; - $scope.example15data = [ - {id: 1, label: "David"}, - {id: 2, label: "Jhon"}, - {id: 3, label: "Lisa"}, - {id: 4, label: "Nicole"}, - {id: 5, label: "Danny"}]; - - $scope.example15settings = { - enableSearch: true - }; - - $scope.customFilter = 'a'; + $scope.example1model = []; + $scope.example1data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + + + $scope.example2model = []; + $scope.example2data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example2settings = {displayProp: 'id'}; + + + $scope.example3model = []; + $scope.example3data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}, + {id: 4, label: "Danny"}]; + $scope.example3settings = {displayProp: 'label', idProp: 'label'}; + + $scope.example4model = []; + $scope.example4data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example4settings = {displayProp: 'label', idProp: 'id', externalIdProp: 'myCustomPropertyForTheObject'}; + + $scope.example5model = []; + $scope.example5data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example5settings = {}; + $scope.example5customTexts = {buttonDefaultText: 'Select Users'}; + + $scope.example6model = [{id: 1}, {id: 3}]; + $scope.example6data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example6settings = {}; + + $scope.example7model = []; + $scope.example7data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example7settings = {externalIdProp: ''}; + + $scope.example8model = []; + $scope.example8data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + + $scope.example9model = []; + $scope.example9data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + $scope.example9settings = {enableSearch: true}; + + $scope.example10model = []; + $scope.example10data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + + $scope.example10settings = {selectionLimit: 2}; + + $scope.example12model = {}; + $scope.example12data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Danny"}]; + + $scope.example12settings = {selectionLimit: 1}; + + + $scope.example11model = []; + $scope.example11data = [ + {id: 1, label: "David", gender: 'M'}, + {id: 2, label: "Jhon", gender: 'M'}, + {id: 3, label: "Lisa", gender: 'F'}, + {id: 4, label: "Nicole", gender: 'F'}, + {id: 5, label: "Danny", gender: 'M'}]; + + $scope.example11settings = { + groupByTextProvider: function(groupValue) + { + if (groupValue === 'M') + { + return 'Male'; + } + else + { + return 'Female'; + } + } + }; + + $scope.example13model = []; + $scope.example13data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Lisa"}, + {id: 4, label: "Nicole"}, + {id: 5, label: "Danny"}]; + + $scope.example13settings = { + smartButtonMaxItems: 3, + smartButtonTextConverter: function(itemText, originalItem) { + if (itemText === 'Jhon') { + return 'Jhonny!'; + } + + return itemText; + } + }; + + $scope.example14model = []; + $scope.example14data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Lisa"}, + {id: 4, label: "Nicole"}, + {id: 5, label: "Danny"}, + {id: 6, label: "Dan"}, + {id: 7, label: "Dean"}, + {id: 8, label: "Adam"}, + {id: 9, label: "Uri"}, + {id: 10, label: "Phil"}]; + + $scope.example14settings = { + scrollableHeight: '100px', + scrollable: true + }; + + $scope.example15model = []; + $scope.example15data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Lisa"}, + {id: 4, label: "Nicole"}, + {id: 5, label: "Danny"}]; + + $scope.example15settings = { + enableSearch: true + }; + $scope.customFilter = 'a'; + + $scope.example16model = []; + $scope.example16data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Lisa"}, + {id: 4, label: "Nicole"}, + {id: 5, label: "Danny"}]; + + $scope.example16settings = { + showAllCount: true + }; + + $scope.example17settings = { + showAllCount: true, + smartButtonMaxItems: 1, + smartButtonTextConverter: function(itemText, originalItem) { + return $scope.example16model.length + ' name' + ($scope.example16model.length != 1 ? 's' : '') + } + }; + }]); diff --git a/pages/javascripts/pages/home/home.html b/pages/javascripts/pages/home/home.html index cfcf370d..bc747062 100644 --- a/pages/javascripts/pages/home/home.html +++ b/pages/javascripts/pages/home/home.html @@ -623,6 +623,94 @@

Code

+ +
+
+ This example shows a demostration how to display custom message when all selected +
This can be done by settings the "search-filter" attribute. +
+
+
+
+
+

Demo

+
+
+
+
+
+
+
+
+
+

Code

+
+
+
+ // HTML +
+ + // JavaScript + + $scope.example16model = []; + $scope.example16data = [ + {id: 1, label: "David"}, + {id: 2, label: "Jhon"}, + {id: 3, label: "Lisa"}, + {id: 4, label: "Nicole"}, + {id: 5, label: "Danny"}]; + + $scope.example16settings = { showAllCount: true}; + +
+
+
+
+
+ + +
+
+ This example shows a demostration how to display custom message when all selected +
This can be done by settings the "search-filter" attribute. +
+
+
+
+
+

Demo

+
+
+
+
+
+
+
+
+
+

Code

+
+
+
+ // HTML +
+ + // JavaScript + + $scope.example17settings = { + showAllCount: true, + smartButtonMaxItems: 1, + smartButtonTextConverter: function(itemText, originalItem) { + return $scope.example16model.length + ' name' + ($scope.example16model.length != 1 ? 's' : '') + } + }; + +
+
+
+
+
+

Full API Documentation

Attributes

@@ -801,6 +889,12 @@

Settings

angular.noop Related the "Smart Button Text" feature, if a function provided - it will called with two paramters: The item's text and the original item, the return value will displayed instead of the item's display property. This feature is useful when you want to convert the displayed text into something else. + + showAllCount + Boolean + false + When count are displayed on the button, display allSelectedText whan all available options are selected +

Events

@@ -892,6 +986,11 @@

Translation Texts

checked The suffix for the button that used when using "dynamicText". + + allSelectedText + All selected + Text diplayed when all available options are selected. + diff --git a/src/angularjs-dropdown-multiselect.js b/src/angularjs-dropdown-multiselect.js index 81f611b4..ca873a67 100644 --- a/src/angularjs-dropdown-multiselect.js +++ b/src/angularjs-dropdown-multiselect.js @@ -56,7 +56,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co }, link: function ($scope, $element, $attrs) { var $dropdownTrigger = $element.children()[0]; - + $scope.toggleDropdown = function () { $scope.open = !$scope.open; }; @@ -93,7 +93,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co groupBy: $attrs.groupBy || undefined, groupByTextProvider: null, smartButtonMaxItems: 0, - smartButtonTextConverter: angular.noop + smartButtonTextConverter: angular.noop, + showAllCount: false }; $scope.texts = { @@ -103,7 +104,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co selectionOf: '/', searchPlaceholder: 'Search...', buttonDefaultText: 'Select', - dynamicButtonTextSuffix: 'checked' + dynamicButtonTextSuffix: 'checked', + allSelectedText: 'All selected' }; $scope.searchFilter = $scope.searchFilter || ''; @@ -190,9 +192,15 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co } }); - if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) { - itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems); - itemsText.push('...'); + if ($scope.settings.showAllCount && $scope.selectedModel.length === $scope.options.length) { + return $scope.texts.allSelectedText; + } else { + if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) { + itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems); + if($scope.settings.smartButtonMaxItems !== 1 && !$scope.settings.showAllCount) { + itemsText.push('...'); + } + } } return itemsText.join(', '); @@ -208,7 +216,11 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co if (totalSelected === 0) { return $scope.texts.buttonDefaultText; } else { - return totalSelected + ' ' + $scope.texts.dynamicButtonTextSuffix; + if (!$scope.singleSelection && $scope.settings.showAllCount && totalSelected === $scope.options.length) { + return $scope.texts.allSelectedText; + } else { + return totalSelected + ' ' + $scope.texts.dynamicButtonTextSuffix; + } } } } else {