diff --git a/src/tags-input.js b/src/tags-input.js index f768251e..495067d3 100644 --- a/src/tags-input.js +++ b/src/tags-input.js @@ -10,6 +10,8 @@ * * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} [template=NA] URL or id of a custom template for rendering each tag. + * @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=} [keyProperty=text] Property to be used as a unique identifier for the 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. @@ -151,6 +153,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu require: 'ngModel', scope: { tags: '=ngModel', + newTagText: '=?', onTagAdding: '&', onTagAdded: '&', onInvalidTag: '&', @@ -262,6 +265,18 @@ tagsInput.directive('tagsInput', function($timeout, $document, $window, tagsInpu } }; + scope.$watch('newTag.text', function(value) { + if(scope.newTag.text !== scope.newTagText) { + scope.newTagText = value; + } + }); + + scope.$watch('newTagText', function(value) { + if(scope.newTag.text !== scope.newTagText) { + scope.newTag.setText(value); + } + }); + scope.track = function(tag) { return tag[options.keyProperty || options.displayProperty]; }; diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 76d56e76..95f6702c 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -440,6 +440,33 @@ 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'); + }); + + it('updates the input field as the scope\'s model changes', function() { + // Arrange + compile('new-tag-text="innerModel"'); + + // Act + $scope.innerModel = 'foo'; + $scope.$digest(); + + // Assert + expect(getInput().val()).toEqual('foo'); + }); + }); + describe('tabindex option', function() { it('sets the input field tab index', function() { // Arrange/Act