Skip to content
🐚 Angular token input directive. A token input box that automatically creates tokens out of the typed text.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
ng-token-field.css
ng-token-field.js

README.md

ng-token-field

Angular token input directive. A token input box that automatically creates tokens out of the typed text.

Demo

Demo

How to use

1. Import JQuery

This directive requires JQuery

2. Import the ng-token-field stylesheet and script

Include the stylesheet and javascript files:

<link rel="stylesheet" href="ng-token-field.css"> 
<script src="ng-token-field.js"></script>

3. Add the ngTokenField dependency to your module

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

angular.module('MyApp', ['ngTokenField'])...

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

<ng-token-field ng-model="tags" placeholder="Enter comma separated values" validator="validator"></ng-token-field>{{tags}}

5 (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.

.controller('MyController', function($scope) {
	$scope.validator = function(text) {
		// Check if token text is an email
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(text);
    };
	
	$scope.tags = [];
});

Install Using bower

Add ng-token-field as a dependency to your project within your bower.json file

  "dependencies": {
	"ng-token-field": "lucaslouca/ng-token-field"
  }

Then do a bower install in your project directory:

$ bower install
You can’t perform that action at this time.