Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
3 people use it
Submitted by: 924465?v=2 boneskull

angular-tags Build Status

Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap.

Current Version



Running Tests

Clone this repo and execute:

to grab the dependencies. Then execute:

to run the tests. This will grab the test deps from bower, and run them against QUnit in a local server on port 8000.



Demo here.


angular-tags comes in two versions; one with embedded templates and another without. Without templates:

With templates:

You will also want to include the CSS if you are using this version:

Templates are included in the templates/ directory if you want to load them manually and/or modify them.

You'll also need to make sure you have included the ui-bootstrap source.

Finally, include the module in your code, and the required ui.bootstrap.typeahead module:


This is a directive, so at its most basic:

This will render the tags contained in foo (if anything) and provide an input prompt for more tags.

foo can be a delimited string, array of strings, or array of objects with name properties:

All will render identically. Depending on the format you use, you will get the same type back when adding tags via the input. For example, if you add "baz" in the input and your original model happened to be a delimited string, you will get:

Likewise if you had an array of strings:

With Typeahead

The above directive usage will not use the typeahead functionality of ui-bootstrap. To use the typehead functionality, which provides a list of tags from which to choose, you have to specify some values to read from:

The value of src is a comprehension expression, like found in ngOptions. baz here should resemble foo as above; a delimited string, an array of strings, or an array of objects. See Tag Objects below.

Note: Here we're using b (the entire object) for the value; feel free to use something else, but if we use b, the directive will retain any extra data you have put in the tag objects:


The resulting source tags will look like this:

Basically, whatever you set here will become the value of these tags unless you specify an entire object.

Tag Objects

Tag objects have three main properties:

  • name The name (display name) of the tag
  • group (optional) The "group" of the tag, for assigning class names
  • value (optional) The "value" of the tag, which is not displayed

Tag objects can include any other properties you wish to add.


Global Options

To set defaults module-wide, inject the decipherTagsOptions constant into anything and modify it:

Available Options

  • addable whether or not the user is allowed to type arbitrary tags into the input (defaults to false by default if a src is supplied, otherwise defaults to true; see Adding Tags below.
  • delimiter what to use for a delimiter when typing or pasting into the input. Defaults to ,
  • classes An object mapping of group names to class names
  • templateUrl URL to the main template. Defaults to templates/tags.html
  • tagTemplateUrl URL to the "tag" template. Defaults to templates/tag.html

Adding Tags

If you neglect to supply a src (thus not using typeahead) you will be able to enter whatever you like into the tags input, adding tags willy-nilly. If you do supply a src, by default the user will be limited to what's in the list. You can override this by passing an addable property to the options:


If you specify classes, your tags will each be assigned a class name based on the group. For example:

Now when a tag is added to the list, and that tag has the group of myGroup, it will receive the myClass class. This is useful if you want to change the color of certain tags or something.


The directive will emit certain events based on what's going on:

  • decipher.tags.initialized: Emitted when the directive is linked. Data will include a unique $id value of the directive and the original model value.
  • decipher.tags.keyup: Emitted when the user types something into the input. Data will include the unique $id and the value, which is what the user has typed so far. You can attach to this to do validation or anything else.
  • decipher.tags.added: Emitted when the user has successfully added a tag. Data will include the unique $id and a tag object representing the tag added.
  • decipher.tags.addfailed: Emitted when the user tries to add a tag that is not available for whatever reason. This will occur if the user attempts to add a duplicate tag, or if they attempt to add a tag that is not in the supplied src list. Data will include the unique $id and a tag object representing the tag that failed to be added.
  • decipher.tags.removed: Emitted when the user removes a tag, either via backspacing or clicking on the little x in the tag. Data will include the unique $id and a tag object representing the tag removed.




Carl Dougan (@carlsgit) and Christopher Hiller (@boneskull)

comments powered by Disqus
This page was last updated about 5 years ago.