ng-tags-input
Advanced tools
Tags input directive for AngularJS. Check out the ngTagsInput website for more information.
All files are available from a variety of sources. Choose the one that best fits your needs:
npm install ng-tags-input --save)bower install ng-tags-input --save)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">
ngTagsInput module as a dependency in your AngularJS app;<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;<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);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.
Before posting an issue or sending a pull request, make sure to read the CONTRIBUTING file.
See the LICENSE file.
See the CHANGELOG page.
The following are some alternatives to ngTagsInput you may want to check out:
FAQs
Tags input directive for AngularJS
The npm package ng-tags-input receives a total of 23,977 weekly downloads. As such, ng-tags-input popularity was classified as popular.
We found that ng-tags-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.