ngTagsInput

Tags input directive for AngularJS. Check out the ngTagsInput website for more information.

Requirements

AngularJS 1.2.1+ (v1.2.0 is not supported due to an API change in Angular)
A modern browser

Installing

The first step is to get the files. You have 4 options:

Download the files manually from the Releases page.
Use Bower to download the files. Just run bower install ng-tags-input.
Load the files from CDNJS.
Get the latest build* generated by Travis.

* The latest build is based on the master branch and contains the most recent features and bugfixes.

Now all you have to do is add the scripts to your application. Just make sure the ng-tags-input.js file is inserted after the angular.js script:

<script src="angular.js"></script>
<script src="ng-tags-input.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.css">

Usage

Add the ngTagsInput module as a dependency in your AngularJS app;
Add the custom directive <tags-input> to the HTML file where you want to use an input tag control and bind it to a property of your model. That property, if it exists, must be an array of objects and each object must have a property named text containing the tag text;
Set up the options that make sense to your application;
Enable autocomplete, if you want to use it, by adding the directive <auto-complete> inside the <tags-input> tag, and bind it to a function of your model. That function must return a promise that eventually resolves to an array of objects (same rule from step 2 applies here);
Customize the CSS classes, if you want to.
You're done!

Note: There's a more detailed getting started guide on the ngTagsInput website.

Example

<html>
<head>
    <script src="angular.min.js"></script>
    <script src="ng-tags-input.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">
    <script>
        angular.module('myApp', ['ngTagsInput'])
            .controller('MyCtrl', function($scope, $http) {
                $scope.tags = [
                    { text: 'just' },
                    { text: 'some' },
                    { text: 'cool' },
                    { text: 'tags' }
                ];
                $scope.loadTags = function(query) {
                     return $http.get('/tags?query=' + query);
                };
            });
    </script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
    <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
</body>
</html>

Options

Check out the documentation page for a detailed view of all available options.

Demo

You can see the directive in action in the demo page.

Contributing

See the CONTRIBUTING file.

License

See the LICENSE file.

Changelog

See the CHANGELOG page.

Alternatives

The following are some alternatives to ngTagsInput you may want to check out:

angular-tags: Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
angular-tagger: Pure Angular autocomplete with tags, no jQuery
jsTag: Open source project for editing tags (aka tokenizer) based on AngularJS
bootstrap-tagsinput: jQuery plugin providing a Twitter Bootstrap user interface for managing tags (provides Angular support)

PitBeast/ngTagsInput