From 5f9396852eeca7af42f06015644e0dc833525b9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Tue, 29 Nov 2016 12:42:13 +0200 Subject: [PATCH 1/6] Added new text and setting to display custom text when all available options are selected --- pages/javascripts/pages/home/ExampleCtrl.js | 320 ++++++++++---------- pages/javascripts/pages/home/home.html | 56 ++++ src/angularjs-dropdown-multiselect.js | 14 +- 3 files changed, 232 insertions(+), 158 deletions(-) diff --git a/pages/javascripts/pages/home/ExampleCtrl.js b/pages/javascripts/pages/home/ExampleCtrl.js index f9fefa6e..8f0eb409 100644 --- a/pages/javascripts/pages/home/ExampleCtrl.js +++ b/pages/javascripts/pages/home/ExampleCtrl.js @@ -1,158 +1,170 @@ '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 + }; + }]); diff --git a/pages/javascripts/pages/home/home.html b/pages/javascripts/pages/home/home.html index cfcf370d..f21a1485 100644 --- a/pages/javascripts/pages/home/home.html +++ b/pages/javascripts/pages/home/home.html @@ -623,6 +623,51 @@

Code

+ +
+
+ This example shows a demostration of access and set the search filter from outside the directive. +
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}; + +
+
+
+
+
+

Full API Documentation

Attributes

@@ -801,6 +846,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 +943,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..81349d6d 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 || ''; @@ -208,7 +210,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 { From 7091aff320e9c019067615b0e73352c2d3450662 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Tue, 29 Nov 2016 12:44:42 +0200 Subject: [PATCH 2/6] Run grunt, dist updated --- dist/angularjs-dropdown-multiselect.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/angularjs-dropdown-multiselect.min.js b/dist/angularjs-dropdown-multiselect.min.js index 3ea0d3fc..435ce0b6 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.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:!$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 From 15f979664ce459f8c5ce197a5d941a8b35f12f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Tue, 29 Nov 2016 13:00:07 +0200 Subject: [PATCH 3/6] updated version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 51b36cde..e9ade974 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angularjs-dropdown-multiselect", - "version": "1.5.2", + "version": "1.5.3", "authors": [ "Dotan Simha " ], From a5fca0ebb3b7fa10d533f74188869f5b5cb2fe87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Tue, 29 Nov 2016 13:28:14 +0200 Subject: [PATCH 4/6] Implemented new option when using smartButtonMaxItems --- dist/angularjs-dropdown-multiselect.min.js | 2 +- pages/javascripts/pages/home/ExampleCtrl.js | 8 ++++ pages/javascripts/pages/home/home.html | 45 ++++++++++++++++++++- src/angularjs-dropdown-multiselect.js | 10 +++-- 4 files changed, 60 insertions(+), 5 deletions(-) diff --git a/dist/angularjs-dropdown-multiselect.min.js b/dist/angularjs-dropdown-multiselect.min.js index 435ce0b6..0fbaeb09 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,$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.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:!$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 +"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),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 8f0eb409..3436c572 100644 --- a/pages/javascripts/pages/home/ExampleCtrl.js +++ b/pages/javascripts/pages/home/ExampleCtrl.js @@ -167,4 +167,12 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop showAllCount: true }; + $scope.example17settings = { + showAllCount: true, + smartButtonMaxItems: 1, + smartButtonTextConverter: function(itemText, originalItem) { + return itemText + ' is my name'; + } + }; + }]); diff --git a/pages/javascripts/pages/home/home.html b/pages/javascripts/pages/home/home.html index f21a1485..6af0967a 100644 --- a/pages/javascripts/pages/home/home.html +++ b/pages/javascripts/pages/home/home.html @@ -626,7 +626,7 @@

Code

- This example shows a demostration of access and set the search filter from outside the directive. + This example shows a demostration how to display custom message when all selected
This can be done by settings the "search-filter" attribute.
@@ -668,6 +668,49 @@

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.example17settings = { + showAllCount: true, + smartButtonMaxItems: 1, + smartButtonTextConverter: function(itemText, originalItem) { + return itemText + ' is my name'; + } + }; + +
+
+
+
+
+

Full API Documentation

Attributes

diff --git a/src/angularjs-dropdown-multiselect.js b/src/angularjs-dropdown-multiselect.js index 81349d6d..3db644fe 100644 --- a/src/angularjs-dropdown-multiselect.js +++ b/src/angularjs-dropdown-multiselect.js @@ -192,9 +192,13 @@ 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); + itemsText.push('...'); + } } return itemsText.join(', '); From 15eebf934f26697004aafbe7bf6c6ec854038681 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Wed, 7 Dec 2016 10:28:47 +0200 Subject: [PATCH 5/6] Improved showAllCount using smartButtonTextConverter --- dist/angularjs-dropdown-multiselect.min.js | 2 +- pages/javascripts/pages/home/ExampleCtrl.js | 2 +- pages/javascripts/pages/home/home.html | 2 +- src/angularjs-dropdown-multiselect.js | 4 +++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/dist/angularjs-dropdown-multiselect.min.js b/dist/angularjs-dropdown-multiselect.min.js index 0fbaeb09..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,$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),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 +"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 3436c572..59176ddc 100644 --- a/pages/javascripts/pages/home/ExampleCtrl.js +++ b/pages/javascripts/pages/home/ExampleCtrl.js @@ -171,7 +171,7 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop showAllCount: true, smartButtonMaxItems: 1, smartButtonTextConverter: function(itemText, originalItem) { - return itemText + ' is my name'; + 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 6af0967a..bc747062 100644 --- a/pages/javascripts/pages/home/home.html +++ b/pages/javascripts/pages/home/home.html @@ -701,7 +701,7 @@

Code

showAllCount: true, smartButtonMaxItems: 1, smartButtonTextConverter: function(itemText, originalItem) { - return itemText + ' is my name'; + return $scope.example16model.length + ' name' + ($scope.example16model.length != 1 ? 's' : '') } }; diff --git a/src/angularjs-dropdown-multiselect.js b/src/angularjs-dropdown-multiselect.js index 3db644fe..ca873a67 100644 --- a/src/angularjs-dropdown-multiselect.js +++ b/src/angularjs-dropdown-multiselect.js @@ -197,7 +197,9 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co } else { if ($scope.selectedModel.length > $scope.settings.smartButtonMaxItems) { itemsText = itemsText.slice(0, $scope.settings.smartButtonMaxItems); - itemsText.push('...'); + if($scope.settings.smartButtonMaxItems !== 1 && !$scope.settings.showAllCount) { + itemsText.push('...'); + } } } From ced51a40682d3f45654a0bf9294c4180dc6abdf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=83zvan=20Moldovan=C3=88?= Date: Wed, 7 Dec 2016 10:30:45 +0200 Subject: [PATCH 6/6] Updated bower version number --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index e9ade974..3eeb8e55 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angularjs-dropdown-multiselect", - "version": "1.5.3", + "version": "1.5.5", "authors": [ "Dotan Simha " ],