Simple input control with tag editing support for AngularJS.
- AngularJS 1.0.5+
- A modern browser
Download both ng-tags-input.min.js and ng-tags-input.min.css files from the build folder and add them to your web application. Make sure the JavaScript file is included after the AngularJS script.
- Add the
tags-inputmodule 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;
- Customize the CSS classes, if you want to.
- You're done!
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ng-tags-input.min.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">
<script>
angular.module('myApp', ['tags-input'])
.controller('MyCtrl', function($scope) {
$scope.tags = ['just','some','cool','tags'];
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<tags-input ng-model="tags"></tags-input>
</body>
</html>
The tags-input directive comes with lots of options so you can fit it to your needs:
ng-class: CSS class to style the control.tabindex: Tab index for the new tag input box.placeholder: Text placeholder for the new tag input box. Defaults to: Add a tagremove-tag-symbol: Character to remove an existing tag. Defaults to: ×replace-spaces-with-dashes: Flag indicating that all spaces will be replaced with dashes (This behavior will be disabled if theadd-on-spaceoption is true). Defaults to: truemin-length: Minimum length for a new tag. Defaults to: 3max-length: Maximum length for a new tag. Defaults to: Theplaceholderlength or themin-lengthvalue, whichever is greater.add-on-enter: Flag indicating that a new tag will be added on pressing the ENTER key. Defaults to: trueadd-on-space: Flag indicating that a new tag will be added on pressing the SPACE key. Defaults to: falseadd-on-comma: Flag indicating that a new tag will be added on pressing the COMMA key. Defaults to: trueallowed-tags-pattern: Regular expression that determines the pattern used to validate a tag. Defaults to ^[a-zA-Z0-9\s]+$* (letters, numbers and spaces)enable-editing-last-tag: Flag indicating that the last tag will be moved back into the new tag input box instead of being removed when the backspace key is pressed and the input box is empty. Defaults to: false
You can see the directive in action in the demo page.
Building the directive is a four-step process:
- Install Node.js;
- Install PhantomJS;
- 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 file.