ngTagEditor: AngularJS tag input, editor

A new tag input, built for AngularJS


Add the following files to your application: ngTagEditor.css, ngTagEditor.js


Basic usage

<tag-editor></tag-editor> In your html in any form.

It will add a hidden input <input type="hidden" name="tags"> containing added tags name, separated by a comma.

Advanced usage

Initializing tags

You can also initializing tags through ng-model and a custom controller

Available options

You can pass options by the following way: <tag-editor option="value"></tag-editor>.

  • output which accepts
    • name: will add to the hidden input tag names (default).
    • id: If you use suggestions, it will replace tag names by tag Ids in the hidden input.
  • fetch
    • url/to/my/api.php?query= required to suggest tags while the user is typing, this way, you can save ids instead of names (see output).

First, give the URL of your API through the fetch option. The data must be formated as follow, as stated this article.


See test.html

comments powered by Disqus
This page was last updated over 4 years ago.