Open peppe863 opened 6 years ago
I have fix the problem of reset multiselect after use search filter.
angular-bootstrap-multiselect.js:
(function () { 'use strict';
var multiselect = angular.module('btorfs.multiselect', ['btorfs.multiselect.templates']); multiselect.getRecursiveProperty = function (object, path) { return path.split('.').reduce(function (object, x) { if (object) { return object[x]; } else { return null; } }, object) }; multiselect.directive('multiselect', ['$filter', '$document', '$log', function ($filter, $document, $log) { return { restrict: 'AE', scope: { options: '=', displayProp: '@', idProp: '@', searchLimit: '=?', selectionLimit: '=?', showSelectAll: '=?', showUnselectAll: '=?', showSearch: '=?', searchFilter: '=?', disabled: '=?ngDisabled', labels: '=?', classesBtn: '=?', showTooltip: '=?', placeholder: '@?', opt: '=' }, require: 'ngModel', templateUrl: 'multiselect.html', controller: ['$scope', function($scope) { if (angular.isUndefined($scope.classesBtn)) { $scope.classesBtn = ['btn-block','btn-default']; } }], link: function ($scope, $element, $attrs, $ngModelCtrl) { $scope.selectionLimit = $scope.selectionLimit || 0; $scope.searchLimit = $scope.searchLimit || 25; $scope.searchFilter = ''; $scope.resolvedOptions = []; if (typeof $scope.options !== 'function') { $scope.resolvedOptions = $scope.options; } if (typeof $attrs.disabled != 'undefined') { $scope.disabled = true; } var closeHandler = function (event) { if (!$element[0].contains(event.target)) { $scope.$apply(function () { $scope.open = false; }); } }; $document.on('click', closeHandler); var updateSelectionLists = function () { if (!$ngModelCtrl.$viewValue) { if ($scope.selectedOptions) { $scope.selectedOptions = []; } $scope.unselectedOptions = $scope.resolvedOptions.slice(); // Take a copy } else { $scope.selectedOptions = $scope.resolvedOptions.filter(function (el) { var id = $scope.getId(el); for (var i = 0; i < $ngModelCtrl.$viewValue.length; i++) { var selectedId = $scope.getId($ngModelCtrl.$viewValue[i]); if (id === selectedId) { return true; } } return false; }); $scope.unselectedOptions = $scope.resolvedOptions.filter(function (el) { return $scope.selectedOptions.indexOf(el) < 0; }); } }; $scope.toggleDropdown = function () { $scope.open = !$scope.open; $scope.resolvedOptions = $scope.options; updateSelectionLists(); }; $ngModelCtrl.$render = function () { updateSelectionLists(); }; $ngModelCtrl.$viewChangeListeners.push(function () { updateSelectionLists(); }); $ngModelCtrl.$isEmpty = function (value) { if (value) { return (value.length === 0); } else { return true; } }; var watcher = $scope.$watch('selectedOptions', function () { $ngModelCtrl.$setViewValue(angular.copy($scope.selectedOptions)); }, true); $scope.$on('$destroy', function () { $document.off('click', closeHandler); if (watcher) { watcher(); // Clean watcher } }); $scope.getButtonText = function () { if ($scope.selectedOptions && $scope.selectedOptions.length === 1) { return $scope.getDisplay($scope.selectedOptions[0]); } if ($scope.selectedOptions && $scope.selectedOptions.length > 1) { var totalSelected = angular.isDefined($scope.selectedOptions) ? $scope.selectedOptions.length : 0; if (totalSelected === 0) { return $scope.labels && $scope.labels.select ? $scope.labels.select : ($scope.placeholder || 'Select'); } else { return totalSelected + ' ' + ($scope.labels && $scope.labels.itemsSelected ? $scope.labels.itemsSelected : 'selected'); } } else { return $scope.labels && $scope.labels.select ? $scope.labels.select : ($scope.placeholder || 'Select'); } }; $scope.selectAll = function () { $scope.selectedOptions = $scope.resolvedOptions.slice(); // Take a copy; $scope.unselectedOptions = []; }; $scope.unselectAll = function () { $scope.selectedOptions = []; $scope.unselectedOptions = $scope.resolvedOptions.slice(); // Take a copy; }; $scope.toggleItem = function (item) { if (typeof $scope.selectedOptions === 'undefined') { $scope.selectedOptions = []; } var selectedIndex = $scope.selectedOptions.indexOf(item); var currentlySelected = (selectedIndex !== -1); if (currentlySelected) { $scope.unselectedOptions.push($scope.selectedOptions[selectedIndex]); $scope.selectedOptions.splice(selectedIndex, 1); } else if (!currentlySelected && ($scope.selectionLimit === 0 || $scope.selectedOptions.length < $scope.selectionLimit)) { var unselectedIndex = $scope.unselectedOptions.indexOf(item); $scope.unselectedOptions.splice(unselectedIndex, 1); $scope.selectedOptions.push(item); } }; $scope.getId = function (item) { if (angular.isString(item)) { return item; } else if (angular.isObject(item)) { if ($scope.idProp) { return multiselect.getRecursiveProperty(item, $scope.idProp); } else { $log.error('Multiselect: when using objects as model, a idProp value is mandatory.'); return ''; } } else { return item; } }; $scope.getDisplay = function (item) { if (angular.isString(item)) { return item; } else if (angular.isObject(item)) { if ($scope.displayProp) { return multiselect.getRecursiveProperty(item, $scope.displayProp); } else { $log.error('Multiselect: when using objects as model, a displayProp value is mandatory.'); return ''; } } else { return item; } }; $scope.isSelected = function (item) { if (!$scope.selectedOptions) { return false; } var itemId = $scope.getId(item); for (var i = 0; i < $scope.selectedOptions.length; i++) { var selectedElement = $scope.selectedOptions[i]; if ($scope.getId(selectedElement) === itemId) { return true; } } return false; }; $scope.updateOptions = function () { if (typeof $scope.options === 'function') { $scope.options().then(function (resolvedOptions) { $scope.resolvedOptions = resolvedOptions; updateSelectionLists(); }); } }; angular.extend($scope.opt, { directiveFunction: function() { $scope.searchFilter = ''; $scope.search(); } }); // This search function is optimized to take into account the search limit. // Using angular limitTo filter is not efficient for big lists, because it still runs the search for // all elements, even if the limit is reached $scope.search = function () { var counter = 0; return function (item) { if (counter > $scope.searchLimit) { return false; } var displayName = $scope.getDisplay(item); if (displayName) { var result = displayName.toLowerCase().indexOf($scope.searchFilter.toLowerCase()) > -1; if (result) { counter++; } return result; } } }; } }; }]);
}());
angular.module('btorfs.multiselect.templates', ['multiselect.html']);
angular.module("multiselect.html", []).run(["$templateCache", function ($templateCache) { $templateCache.put("multiselect.html", "<div class=\"btn-group\" style=\"width: 100%\">\n" + " <button type=\"button\" class=\"btn dropdown-toggle\" ng-class=\"classesBtn\" ng-click=\"toggleDropdown()\" ng-disabled=\"disabled\" style=\"white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;\">\n" + " {{getButtonText()}} <span class=\"caret\">\n" + " \n" + " <ul class=\"dropdown-menu dropdown-menu-form dropdown-menu-form-custom\"\n" + " ng-style=\"{display: open ? 'block' : 'none'}\" style=\"width: 100%; overflow-x: auto\">\n" + "\n" + " <li ng-show=\"showSelectAll\">\n" + " <a ng-click=\"selectAll()\" href=\"\">\n" + " <span class=\"glyphicon glyphicon-ok\"> {{labels.selectAll || 'Select All'}}\n" + " \n" + " \n" + " <li ng-show=\"showUnselectAll\">\n" + " <a ng-click=\"unselectAll()\" href=\"\">\n" + " <span class=\"glyphicon glyphicon-remove\"> {{labels.unselectAll || 'Unselect All'}}\n" + " \n" + " \n" + " <li ng-show=\"(showSelectAll || showUnselectAll)\"\n" + " class=\"divider\">\n" + " \n" + "\n" + " <li role=\"presentation\" ng-repeat=\"option in selectedOptions\" class=\"active\">\n" + " <a class=\"item-selected\" href=\"\" title=\"{{showTooltip ? getDisplay(option) : ''}}\" ng-click=\"toggleItem(option); $event.stopPropagation()\" style=\"overflow-x: hidden;text-overflow: ellipsis\">\n" + " <span class=\"glyphicon glyphicon-remove\">\n" + " {{getDisplay(option)}}\n" + " \n" + " \n" + " <li ng-show=\"selectedOptions.length > 0\" class=\"divider\">\n" + "\n" + " <li ng-show=\"showSearch\">\n" + " <div class=\"dropdown-header\">\n" + " <input type=\"text\" class=\"form-control input-sm\" style=\"width: 100%;\"\n" + " ng-model=\"searchFilter\" placeholder=\"{{labels.search || 'Search...'}}\" ng-change=\"updateOptions()\"/>\n" + "
HTML EXAMPLE:
CALL RESET FROM CONTROLLER:
$scope.dirOptComuni = {}; $scope.callDirFunc = function(){ $scope.dirOptComuni.directiveFunction(); };
I have fix the problem of reset multiselect after use search filter.
angular-bootstrap-multiselect.js:
(function () { 'use strict';
}());
angular.module('btorfs.multiselect.templates', ['multiselect.html']);
angular.module("multiselect.html", []).run(["$templateCache", function ($templateCache) { $templateCache.put("multiselect.html", "<div class=\"btn-group\" style=\"width: 100%\">\n" + " <button type=\"button\" class=\"btn dropdown-toggle\" ng-class=\"classesBtn\" ng-click=\"toggleDropdown()\" ng-disabled=\"disabled\" style=\"white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;\">\n" + " {{getButtonText()}} <span class=\"caret\">\n" + " \n" + " <ul class=\"dropdown-menu dropdown-menu-form dropdown-menu-form-custom\"\n" + " ng-style=\"{display: open ? 'block' : 'none'}\" style=\"width: 100%; overflow-x: auto\">\n" + "\n" + " <li ng-show=\"showSelectAll\">\n" + " <a ng-click=\"selectAll()\" href=\"\">\n" + " <span class=\"glyphicon glyphicon-ok\"> {{labels.selectAll || 'Select All'}}\n" + " \n" + " \n" + " <li ng-show=\"showUnselectAll\">\n" + " <a ng-click=\"unselectAll()\" href=\"\">\n" + " <span class=\"glyphicon glyphicon-remove\"> {{labels.unselectAll || 'Unselect All'}}\n" + " \n" + " \n" + " <li ng-show=\"(showSelectAll || showUnselectAll)\"\n" + " class=\"divider\">\n" + " \n" + "\n" + " <li role=\"presentation\" ng-repeat=\"option in selectedOptions\" class=\"active\">\n" + " <a class=\"item-selected\" href=\"\" title=\"{{showTooltip ? getDisplay(option) : ''}}\" ng-click=\"toggleItem(option); $event.stopPropagation()\" style=\"overflow-x: hidden;text-overflow: ellipsis\">\n" + " <span class=\"glyphicon glyphicon-remove\">\n" + " {{getDisplay(option)}}\n" + " \n" + " \n" + " <li ng-show=\"selectedOptions.length > 0\" class=\"divider\">\n" + "\n" + " <li ng-show=\"showSearch\">\n" + " <div class=\"dropdown-header\">\n" + " <input type=\"text\" class=\"form-control input-sm\" style=\"width: 100%;\"\n" + " ng-model=\"searchFilter\" placeholder=\"{{labels.search || 'Search...'}}\" ng-change=\"updateOptions()\"/>\n" + "