tagsInput (directive in module ngTagsInput)
Renders an input box with tag editing support.
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. | – |