API documentation

tagsInput (directive in module ngTagsInput)

Description

Renders an input box with tag editing support.

Usage

<tags-input
  ng-model="{string}"
  [use-strings="{boolean}"]
  [template="{string}"]
  [template-scope="{string}"]
  [display-property="{string}"]
  [key-property="{string}"]
  [type="{string}"]
  [text="{string}"]
  [tabindex="{number}"]
  [placeholder="{string}"]
  [min-length="{number}"]
  [max-length="{number}"]
  [min-tags="{number}"]
  [max-tags="{number}"]
  [allow-leftover-text="{boolean}"]
  [remove-tag-symbol="{string}"]
  [add-on-enter="{boolean}"]
  [add-on-space="{boolean}"]
  [add-on-comma="{boolean}"]
  [add-on-blur="{boolean}"]
  [add-on-paste="{boolean}"]
  [paste-split-pattern="{string}"]
  [replace-spaces-with-dashes="{boolean}"]
  [allowed-tags-pattern="{string}"]
  [enable-editing-last-tag="{boolean}"]
  [add-from-autocomplete-only="{boolean}"]
  [spellcheck="{boolean}"]
  [tag-class="{expression}"]
  [on-tag-adding="{expression}"]
  [on-tag-added="{expression}"]
  [on-invalid-tag="{expression}"]
  [on-tag-removing="{expression}"]
  [on-tag-removed="{expression}"]
  [on-tag-clicked="{expression}"]>
</tags-input>

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. –

autoComplete (directive in module ngTagsInput)

Description

Provides autocomplete support for the tagsInput directive.

Usage

<auto-complete
  source="{expression}"
  [template="{string}"]
  [display-property="{string}"]
  [debounce-delay="{number}"]
  [min-length="{number}"]
  [highlight-matched-text="{boolean}"]
  [max-results-to-show="{number}"]
  [load-on-down-arrow="{boolean}"]
  [load-on-empty="{boolean}"]
  [load-on-focus="{boolean}"]
  [select-first-match="{boolean}"]
  [match-class="{expression}"]>
</auto-complete>

Parameters

Name Type Description Defaults to
source (required) expression Expression to evaluate upon changing the input content. The input value is available as $query. The result of the expression must be a promise that eventually resolves to an array of strings. –
template string URL or id of a custom template for rendering each element of the autocomplete list. –
displayProperty string Property to be rendered as the autocomplete label. tagsInput.displayText
debounceDelay number Amount of time, in milliseconds, to wait before evaluating the expression in the source option after the last keystroke. 100
minLength number Minimum number of characters that must be entered before evaluating the expression in the source option. 3
highlightMatchedText boolean Flag indicating that the matched text will be highlighted in the suggestions list. true
maxResultsToShow number Maximum number of results to be displayed at a time. 10
loadOnDownArrow boolean Flag indicating that the source option will be evaluated when the down arrow key is pressed and the suggestion list is closed. The current input value is available as $query. false
loadOnEmpty boolean Flag indicating that the source option will be evaluated when the input content becomes empty. The $query variable will be passed to the expression as an empty string. false
loadOnFocus boolean Flag indicating that the source option will be evaluated when the input element gains focus. The current input value is available as $query. false
selectFirstMatch boolean Flag indicating that the first match will be automatically selected once the suggestion list is shown. true
matchClass expression Expression to evaluate for each match in order to get the CSS classes to be used. The expression is provided with the current match as $match, 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. –

tagsInputConfig (directive in module ngTagsInput)

Description

Sets global configuration settings for both tagsInput and autoComplete directives. It's also used internally to parse and initialize options from HTML attributes.

Methods

  • setDefaults(directive, defaults)

    Sets the default configuration option for a directive.

    Parameters
    Name Type Description
    directive string Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
    defaults object Object containing options and their values.
    Returns

    The service itself for chaining purposes.

  • setActiveInterpolation(directive, options)

    Sets active interpolation for a set of options.

    Parameters
    Name Type Description
    directive string Name of the directive to be configured. Must be either 'tagsInput' or 'autoComplete'.
    options object Object containing which options should have interpolation turned on at all times.
    Returns

    The service itself for chaining purposes.

  • setTextAutosizeThreshold(threshold)

    Sets the threshold used by the tagsInput directive to re-size the inner input field element based on its contents.

    Parameters
    Name Type Description
    threshold number Threshold value, in pixels.
    Returns

    The service itself for chaining purposes.