Angular Tagging, to tag inputs
npm install angular-tag
![David]()
 
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)
- ngDragDrop (optiona, only if you need drag n drop sorting)
``bash`
bower install angular-tag
and it's available too as npm package, install it with this command:
`bash`
npm install angular-tag
or you may download the latest release
html
`
$3
`javascript
var app = angular.module('myModule', ['angular-tag']);
`
Example
/example.html
`html
Tag Test
Tag Me
Data: {{data}}
Selected: {{selected}}
Max Selected Allowed: {{selected.length+" in "+max}}
data="data" selected="selected"
display-field="texti"
theme="material"
max="max" delimiter="delimiter"
on-tag-maximum="tagUpdated(event)"
on-tag-added="tagUpdated(event)"
on-tag-removed="tagUpdated(event)">
Selected: {{selectedi}}
type="input" selected="selectedi"
placeholder="your own placeholder"
typehead="false" allow-outside-data-set="true"
same-input="true"
on-tag-added="tagUpdated(event)"
on-tag-removed="tagUpdated(event)"
on-tag-active="tagUpdated(event)"
>
Using Required in Form Instance
this disables the form submit button when the form is $dirty , better use with angular form
`
Options
The tag works separately with the options based on the value
$3
it comes with two themes which can take the value of default or material. if used optionally it takes
the default of default
$3
for now the type is just for input
$3
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
$3
return the selected item(s)/tags here, which can be used for other processing
$3
to allow same input , that is a selected item can appear more than once in our tagging system,
takes either true or false
$3
if the allowed input should be outside the data set specified in data , takes either true or false
$3
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
$3
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'}
$3
assist users so they can use their place holders , if not placed it would use the default placeholder which is
Enter Text with , separated
$3
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
$3
max is used in limiting users of the number of tag that can be created , default it allows for infinity entry of tag when not specified
$3
this is used when form validation is required to valid if a tag is selected and the input is empty too , then it makes the form $dirty. check the 3rd tag-me in the _example.html_ above
$3
this is used along side required which is used in targetting a particular tag-me directive in the page in the case of many tag-me , default value is tagMeEvents
The directive handles 4 types of events action which is listed below and a second parameter item. Each of the event uses a directive attribute to handle each of them like this on-tag-removed='eventHandle(event)' where event.action is the name of the event listed below
`bash
onTagAdded //this is send along the added item object
onTagRemoved //this also send along the item object removed
onTagActive //this also send along the selected active selected tag
onTagMaximum //this event is also triggered with the input typed returned too
`
and event.item is the tag object or accompany parameter. Used in the example html above
Demo
You can see the directive in action in the demo page.
Contributing
$3
Here's what you need to do before start working on the code:
1. Install Node.js (0.10.22 or higher)
2. Install
gulp v4 globally npm install -g 'gulpjs/gulp.git#4.0' karma-cli
3. Clone your repository
git clone https://github.com//angular-tag
4. Go to the angular-tag directory
cd angular-tag
5. Add the main angular-tag repo as an upstream remote
git remote add upstream https://github.com/theo4u/angular-tag
6. Install the development dependencies
npm install
bower install
$3
You can build angular-tag with a single command:
gulp 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
$3
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 gulp serve
The task above would run and listen for any js and run the
gulp build-js or gulp build-css or gulp template-build` for css and template respectively