diff --git a/src/tags-input.js b/src/tags-input.js index 4afc66d1..36ef4206 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -36,6 +36,7 @@ * @param {string=} [allowedTagsPattern=.+] Regular expression that determines whether a new tag is valid. * @param {boolean=} [enableEditingLastTag=false] Flag indicating that the last tag will be moved back into the new tag * input box instead of being removed when the backspace key is pressed and the input box is empty. + * @param {boolean=} [softRemove=false] Flag indicating that tags are hidden rather than removed, add `removed:true` property on element. * @param {boolean=} [addFromAutocompleteOnly=false] Flag indicating that only tags coming from the autocomplete list * will be allowed. When this flag is true, addOnEnter, addOnComma, addOnSpace and addOnBlur values are ignored. * @param {boolean=} [spellcheck=true] Flag indicating whether the browser's spellcheck is enabled for the input field or not. @@ -121,6 +122,16 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags }); }; + self.softRemove = function(index) { + var tag = self.items[index]; + + return canRemoveTag(tag).then(function() { + self.items[index].removed = true; + events.trigger('tag-removed', { $tag: tag }); + }); + + }; + self.select = function(index) { if (index < 0) { index = self.items.length - 1; @@ -196,6 +207,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags addOnPaste: [Boolean, false], pasteSplitPattern: [RegExp, /,/], allowedTagsPattern: [RegExp, /.+/], + softRemove: [Boolean, false], enableEditingLastTag: [Boolean, false], minTags: [Number, 0], maxTags: [Number, MAX_SAFE_INTEGER], @@ -245,6 +257,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, $q, tags if ($scope.disabled) { return; } + if($scope.options.softRemove){ + $scope.tagList.softRemove(index); + return; + } $scope.tagList.remove(index); } }; diff --git a/templates/tags-input.html b/templates/tags-input.html index 81e260ff..a1a372ae 100644 --- a/templates/tags-input.html +++ b/templates/tags-input.html @@ -4,7 +4,8 @@
  • + ng-click="eventHandlers.tag.click(tag)" + ng-hide="tag.removed">
  • diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 3a72d514..b0939406 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -184,6 +184,26 @@ describe('tags-input directive', function() { expect(isolateScope.tagList.index).toBe(-1); }); + it('soft removes a tag when the remove button is clicked and softRemove option is true', function() { + // Arrange + $scope.tags = generateTags(3); + compile('soft-remove="true"'); + + var itemIndex = 1; + // Act + getRemoveButton(itemIndex).click(); + + + var tagsElement = angular.element(element.find('li')[itemIndex]); + + // Assert + expect(tagsElement.hasClass('ng-hide')).toBe(true); + expect(element.find('li.ng-hide').length).toBe(1); + expect($scope.tags[itemIndex].removed).toEqual(true); + expect(isolateScope.tagList.selected).toBe(null); + expect(isolateScope.tagList.index).toBe(-1); + }); + it('sets focus on the input field after a tag is added', function() { // Arrange compile();