From 43358800f5694a7bdff4bd10cdf4005a6e28b079 Mon Sep 17 00:00:00 2001 From: Logan Barnett Date: Fri, 13 Mar 2015 17:14:57 -0700 Subject: [PATCH] feat(tagsInput): add newTagText option Add an option for binding to the text in the input element. This feature is important because it allows developers to know when the input has changed as well the state of the input at the time of the change. An example use case is doing custom validations that regular expressions couldn't satisfy. Closes #197. --- src/tags-input.js | 6 ++++++ test/tags-input.spec.js | 15 +++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/tags-input.js b/src/tags-input.js index be685b6c..576cf7ce 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -9,6 +9,7 @@ * Renders an input box with tag editing support. * * @param {string} ngModel Assignable angular expression to data-bind to. + * @param {string} newTagText Assignable angular expression for data-binding to the underlying input for a new tag. * @param {string=} [displayProperty=text] Property to be rendered as the tag label. * @param {string=} [type=text] Type of the input element. Only 'text', 'email' and 'url' are supported values. * @param {number=} tabindex Tab order of the control. @@ -121,6 +122,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) require: 'ngModel', scope: { tags: '=ngModel', + newTagText: '=?', onTagAdded: '&', onInvalidTag: '&', onTagRemoved: '&' @@ -200,6 +202,10 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig) scope.newTag = { text: '', invalid: null }; + scope.$watch('newTag.text', function(value) { + scope.newTagText = value; + }); + scope.getDisplayText = function(tag) { return safeToString(tag[options.displayProperty]); }; diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 38db0c12..c8cf919c 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -377,6 +377,21 @@ describe('tags-input directive', function() { }); }); + describe('new-tag-text option', function() { + it('updates as text is typed into the input field', function() { + // Arrange + compile('new-tag-text="innerModel"'); + + // Act + sendKeyPress('f'.charCodeAt(0)); + sendKeyPress('o'.charCodeAt(0)); + sendKeyPress('o'.charCodeAt(0)); + + // Assert + expect($scope.innerModel).toEqual('foo'); + }); + }); + describe('tabindex option', function() { it('sets the input field tab index', function() { // Arrange/Act