Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap.
- ui-bootstrap (ui.bootstrap.typeahead module)
- Bootstrap CSS (optional)
- Font Awesome (optional)
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.
angular-tags comes in two versions; one with embedded templates and another without. Without 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
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
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:
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 have three main properties:
nameThe 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.
To set defaults module-wide, inject the
decipherTagsOptions constant into anything and modify it:
addablewhether or not the user is allowed to type arbitrary tags into the input (defaults to
falseby default if a
srcis supplied, otherwise defaults to
true; see Adding Tags below.
delimiterwhat to use for a delimiter when typing or pasting into the input. Defaults to
classesAn object mapping of group names to class names
templateUrlURL to the main template. Defaults to
tagTemplateUrlURL to the "tag" template. Defaults to
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
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
$idvalue of the directive and the original
decipher.tags.keyup: Emitted when the user types something into the input. Data will include the unique
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
tagobject 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
srclist. Data will include the unique
tagobject 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
xin the tag. Data will include the unique
tagobject representing the tag removed.
Carl Dougan (@carlsgit) and Christopher Hiller (@boneskull)