Tags input directive for AngularJS. Check out the ngTagsInput website for more information.
- AngularJS 1.2.1+ (v1.2.0 is not supported due to an API change in Angular)
- A modern browser
The first step is to get the files. You have 3 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.
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">- 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 objects and each object must have a property namedtextcontaining 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.
<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>Check out the documentation page for a detailed view of all available options.
You can see the directive in action in the demo page.
See the CONTRIBUTING file.
See the LICENSE file.
See the CHANGELOG page.
