Tags input directive for AngularJS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs style(all): Change indentation to 2 spaces [skip ci] Apr 25, 2017
grunt
scss feat(autocomplete): Add autoscroll support Mar 19, 2015
src
templates feat(tagsInput): Add templateScope option May 10, 2016
test chore(build): Add missing annotations to make DI work with minified f… Apr 25, 2017
.eslintrc.js
.gitignore
.travis.yml chore(travis): Set up Travis to use a newer version of Ruby Apr 25, 2017
CHANGELOG.md chore(release): Release v3.2.0 Apr 15, 2017
CONTRIBUTING.md docs(CONTRIBUTING): Update "Reporting a bug" section Oct 14, 2015
Gruntfile.js chore(grunt): Add source map files to build artifacts Apr 25, 2017
LICENSE docs(LICENSE): Update LICENSE file [skip ci] Jul 12, 2016
README.md docs(README): Add download links for the latest build files [skip ci] May 10, 2016
karma.conf.js chore(build): Add missing annotations to make DI work with minified f… Apr 25, 2017
npm-shrinkwrap.json chore(grunt): Remove unused tasks Apr 25, 2017
package.json chore(travis): Update Travis configuration Apr 25, 2017
sauce.launchers.json chore(karma): Set up tests to run on Opera Jul 19, 2014

README.md

ngTagsInput

Travis Coveralls David GitHub release

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

Requirements

  • AngularJS 1.3+
  • A modern browser (Chrome 31+, Firefox 29+, Safari 7+, Opera 12+, IE 10+)

Installing

All files are available from a variety of sources. Choose the one that best fits your needs:

You can also grab the latest build generated by Travis. It's fully functional and may contain new features and bugfixes not yet published to the services listed above.

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

  1. Add the ngTagsInput module as a dependency in your AngularJS app;
  2. Add the custom element <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;
  3. Set up the options that make sense to your application;
  4. 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 either an array of objects or a promise that eventually resolves to an array of objects (same rule from step 2 applies here);
  5. Customize the CSS classes, if you want to.
  6. 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

Before posting an issue or sending a pull request, make sure to read 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)

Latest build