Tags input directive for AngularJS. Check out the ReadMe on angular-tag website for more information.
- Angular.js 1.3+
- ngAnimate (optional for typehead animation)
This module is available as bower package, install it with this command:
bower install angular-tagand it's available too as npm package, install it with this command:
npm install angular-tagor you may download the latest release
<link href="/angular-tag/angular-tag.min.css" rel="stylesheet" />
<script src="angular/angular.js"></script>
<script type="text/javascript" src="/angular-tag/angular-tag.min.js"></script>var app = angular.module('myModule', ['angular-tag']);/example.html
<!DOCTYPE html >
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8">
<title>Tag Test</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="dist/angular-tag.min.js"></script>
<link rel="stylesheet" href="dist/angular-tag.min.css">
</link>
<script>
angular.module('example',['ngAnimate','angular-tag'])
.controller('MainCtrl',function ($scope) {
$scope.data=[{texti:'Jss1',added:'test'},{texti:'Jss2',add:'test3'},{texti:'Jss3',value:'owk'}];
$scope.selected=[];
$scope.$on('tagAdded', function (event, data) {
console.log(data); // 'Some data'
});
$scope.$on('tagRemoved', function (event, data) {
console.log(data); // 'Some data'
console.log(event);
console.log($scope.selected)
});
})
</script>
</head>
<body ng-controller="MainCtrl" >
<p>Tag Me</p>
<p>Data: {{data}}</p>
<p>Selected: {{selected}}</p>
<tag-me type="input" data="data" selected="selected" display-field="texti" typehead="true" theme="material" allow-outside-data-set="true" same-input="false">test</tag-me>
<p ng-init="selectedi=[{text:'Test'},{text:'three'}]">Selected: {{selectedi}}</p>
<tag-me type="input" data="data" selected="selectedi" placeholder="your own placeholder" typehead="false" allow-outside-data-set="true" same-input="false">test</tag-me>
</body>
</html>The tag works separately with the options based on the value
it comes with two themes which can take the value of `default` or `material`. if used optionally it takes
the default of `default`
for now the type is just for `input`
if set , is where what `angular-tag` use in our data set to check if the entered item match any of the
fields/items in it or in filtering **typehead**
return the selected item(s)/tags here, which can be used for other processing
to allow same input , that is a selected item can appear more than once in our tagging system,
takes either `true` or `false`
if the allowed input should be outside the data set specified in `data` , takes either `true` or `false`
used in turning type head to assist users when typing or not , takes either `true` or `false`, if animation is wanted
simply inject ngAnimate to your app module to see the type head in action
field to display to the user in the data set to the tag view , i.e which field to show to the user
when typing or when adding tag, default if not specified uses the `text` object field parameter like in {text:'text'}
assist users so they can use their place holders , if not placed it would use the default placeholder which is
`Enter Text with , separated`
delimiter to separate the text entered, checks if the user hit on the delimiter activate the tag, default it uses `,`
and always uses `Enter Key` along side
The directive emits two events which is when a tag is added and when a tag is removed
tagAdded //emitted with the added item to the parent scope
tagRemoved //emitted with the removed item to the parent ScopeUsed in the example html above
You can see the directive in action in the demo page.
Here's what you need to do before start working on the code:
-
Install Node.js (0.10.22 or higher)
-
Install
grunt-cligloballynpm install -g grunt-cli karma-cli -
Clone your repository
git clone https://github.com/<your_github_username>/angular-tag -
Go to the angular-tag directory
cd angular-tag -
Add the main angular-tag repo as an upstream remote
git remote add upstream https://github.com/theo4u/angular-tag -
Install the development dependencies
npm install bower install
You can build angular-tag with a single command:
grunt build
That performs all tasks needed to produce the final JavaScript and CSS files. After the build completes, a folder named dist will be generated containing the following files:
angular-tag.js
angular-tag.css
angular-tag.min.js
angular-tag.min.css
You can run it using the task below, which would run and watch any changes to our .js and .css and anything inside the template folder
grunt serve
The task above would run and listen for any js and run the grunt build-js or grunt build-css or grunt template-build for css and template respectively
See the LICENSE file.