Tags input directive for AngularJS. Check out the ngTagsInput website for more information.
- AngularJS 1.2+
- A modern browser
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.
- Add the
ngTagsInputmodule 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 strings; - 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; - Customize the CSS classes, if you want to.
- You're done!
<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>
Check out the documentation page for a detailed view of all available options.
You can see the directive in action in the demo page.
Building the directive is a five-step process:
- Install Node.js;
- Install PhantomJS;
- Run
npm install -g grunt-cli karmato install grunt-cli and karma globally; - Run
npm installto install the development dependencies; - Run
gruntto build the directive.
While coding you can execute grunt test to run the tests or grunt watch to run them automatically every time the source code files change.
See the LICENSE file.
See the CHANGELOG page.