tagsInput (directive in module ngTagsInput)

Description

Renders an input box with tag editing support.

Usage

{% highlight html %} {% endhighlight %}

Parameters

Name Type Description Defaults to
ngModel (required) string Assignable Angular expression to data-bind to.
useStrings boolean Flag indicating that the model is an array of strings (EXPERIMENTAL). false
template string URL or id of a custom template for rendering each tag.
templateScope string Scope to be passed to custom templates - of both tagsInput and autoComplete directives - as $scope.
displayProperty string Property to be rendered as the tag label. text
keyProperty string Property to be used as a unique identifier for the tag. text
type string Type of the input element. Only 'text', 'email' and 'url' are supported values. text
text string Assignable Angular expression for data-binding to the element's text.
tabindex number Tab order of the control.
placeholder string Placeholder text for the control. Add a tag
minLength number Minimum length for a new tag. 3
maxLength number Maximum length allowed for a new tag. MAX_SAFE_INTEGER
minTags number Sets minTags validation error key if the number of tags added is less than minTags. 0
maxTags number Sets maxTags validation error key if the number of tags added is greater than maxTags. MAX_SAFE_INTEGER
allowLeftoverText boolean Sets leftoverText validation error key if there is any leftover text in the input element when the directive loses focus. false
removeTagSymbol string (Obsolete) Symbol character for the remove tag button. ×
addOnEnter boolean Flag indicating that a new tag will be added on pressing the ENTER key. true
addOnSpace boolean Flag indicating that a new tag will be added on pressing the SPACE key. false
addOnComma boolean Flag indicating that a new tag will be added on pressing the COMMA key. true
addOnBlur boolean Flag indicating that a new tag will be added when the input field loses focus. true
addOnPaste boolean Flag indicating that the text pasted into the input field will be split into tags. false
pasteSplitPattern string Regular expression used to split the pasted text into tags. ,
replaceSpacesWithDashes boolean Flag indicating that spaces will be replaced with dashes. true
allowedTagsPattern string Regular expression that determines whether a new tag is valid. .+
enableEditingLastTag boolean 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. false
addFromAutocompleteOnly boolean 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. false
spellcheck boolean Flag indicating whether the browser's spellcheck is enabled for the input field or not. true
tagClass expression Expression to evaluate for each existing tag in order to get the CSS classes to be used. The expression is provided with the current tag as $tag, its index as $index and its state as $selected. The result of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object). See https://docs.angularjs.org/api/ng/directive/ngClass for more information.
onTagAdding expression Expression to evaluate that will be invoked before adding a new tag. The new tag is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected promise is returned, the tag will not be added.
onTagAdded expression Expression to evaluate upon adding a new tag. The new tag is available as $tag.
onInvalidTag expression Expression to evaluate when a tag is invalid. The invalid tag is available as $tag.
onTagRemoving expression Expression to evaluate that will be invoked before removing a tag. The tag is available as $tag. This method must return either a boolean value or a promise. If either a false value or a rejected promise is returned, the tag will not be removed.
onTagRemoved expression Expression to evaluate upon removing an existing tag. The removed tag is available as $tag.
onTagClicked expression Expression to evaluate upon clicking an existing tag. The clicked tag is available as $tag.