Looking for good programming challenges?

Use the search below to find our solutions for selected questions!

Simple token field for AngularJS

Sharing is caring!

I was searching the net for a very, very simple token field for AngularJS the other day to use on a side project that I was working on. Unfortunately I couldn’t find anything that suits my requirements. So I implemented my own. Here is how to use it.

(Optional) Install Using bower
Add ng-token-field as a dependency to your project within your bower.json file

Then do a bower install in your project directory:

Import JQuery
The directive requires JQuery.

Import the ng-token-field stylesheet and script
Include the stylesheet and javascript files:

Add the dependency to your module
Add the ngTokenField module as a dependency in your AngularJS app;

Add the <ng-token-field> element to your DOM
Add the custom element to the HTML file where you want to use and bind it to a property and/or validator function.

(Optional) Add a token text validator
You can also define a validator function that validates the text of each token and styles it accordingly. Below we define a function validator that returns true if the text is an email and false otherwise.

A non AngularJS version is also available here, which does not require JQuery.

Full code & Demo