angular-tag

![Build Status](https://travis-ci.org/theo4u/angular-tag)
![David]()
![npm](https://www.npmjs.com/package/angular-tag) ![Bower](http://bower.io/search/?q=angular-tag)

Tags input directive for AngularJS. Check out the ReadMe on angular-tag website for more information.

!angular-tag

Requirements

- Angular.js 1.3+
- ngAnimate (optional for typehead animation)
- ngDragDrop (optiona, only if you need drag n drop sorting)

Installation

$3

This module is available as bower package, install it with this command:

``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

`$3`

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

  

  
                    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)"
              required="true"
      >
      
  Tag Me is Required


 
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 tagMe
Events

 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. Installgulp 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 nameddist 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 thegulp build-js or gulp build-css or gulp template-build` for css and template respectively

License

See the LICENSE file.

angular-tag

![Build Status](https://travis-ci.org/theo4u/angular-tag)
![David]()
![npm](https://www.npmjs.com/package/angular-tag) ![Bower](http://bower.io/search/?q=angular-tag)

Tags input directive for AngularJS. Check out the ReadMe on angular-tag website for more information.

!angular-tag

Requirements

- Angular.js 1.3+
- ngAnimate (optional for typehead animation)
- ngDragDrop (optiona, only if you need drag n drop sorting)

Installation

$3

This module is available as bower package, install it with this command:

``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

`$3`

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

  

  
                    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)"
              required="true"
      >
      
  Tag Me is Required


 
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 tagMe
Events

 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. Installgulp 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 nameddist 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 thegulp build-js or gulp build-css or gulp template-build` for css and template respectively

License

See the LICENSE file.