Skip to content

runxc1/ngTagsInput

 
 

Repository files navigation

ngTagsInput Build Status Coverage Status devDependency Status

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

Download either ng-tags-input.min.zip or ng-tags-input.zip from the Releases page and add its content files to your web application. Make sure the JavaScript file is included after the AngularJS script.

You can also use Bower to install all files at once. Just run bower install ng-tags-input.

Usage

  1. Add the ngTagsInput module as a dependency in your AngularJS app;
  2. 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 strings;
  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 a promise that eventually resolves to an array of strings;
  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 = ['just','some','cool','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.


Built with Grunt Bitdeli Badge

About

Tags input directive for AngularJS

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.3%
  • CSS 2.7%