{"id":15674396,"url":"https://github.com/theoomoregbee/angular-tag","last_synced_at":"2026-03-11T06:31:01.424Z","repository":{"id":57179211,"uuid":"63618943","full_name":"theoomoregbee/angular-tag","owner":"theoomoregbee","description":"Tags input directive for AngularJS. Check out the  ReadMe on","archived":false,"fork":false,"pushed_at":"2017-02-20T14:57:49.000Z","size":151,"stargazers_count":15,"open_issues_count":1,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-02-15T01:29:27.507Z","etag":null,"topics":["angularjs","bower","css","demo","directive","javascript","open-source","tag","tagging"],"latest_commit_sha":null,"homepage":"http://theoomoregbee.github.io/angular-tag/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theoomoregbee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-18T16:24:55.000Z","updated_at":"2025-02-20T01:15:58.000Z","dependencies_parsed_at":"2022-09-09T19:01:38.577Z","dependency_job_id":null,"html_url":"https://github.com/theoomoregbee/angular-tag","commit_stats":null,"previous_names":["theo4u/angular-tag"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/theoomoregbee/angular-tag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2Fangular-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2Fangular-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2Fangular-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2Fangular-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theoomoregbee","download_url":"https://codeload.github.com/theoomoregbee/angular-tag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2Fangular-tag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","bower","css","demo","directive","javascript","open-source","tag","tagging"],"created_at":"2024-10-03T15:44:16.171Z","updated_at":"2026-03-11T06:31:01.362Z","avatar_url":"https://github.com/theoomoregbee.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-tag\n\n[![Build Status](https://travis-ci.org/theo4u/angular-tag.svg?branch=master)](https://travis-ci.org/theo4u/angular-tag) \n[![David](https://img.shields.io/david/dev/theo4u/angular-tag.svg)]()\n[![npm](https://img.shields.io/npm/v/angular-tag.svg)](https://www.npmjs.com/package/angular-tag) [![Bower](https://img.shields.io/bower/v/angular-tag.svg)](http://bower.io/search/?q=angular-tag)\n\n\nTags input directive for AngularJS. Check out the ReadMe on  [angular-tag website](http://theo4u.github.io/angular-tag/) for more information.\n\n![angular-tag](https://www.googledrive.com/host/0B9WhZZgFzvoBamRRTFlXc19JRXc)\n\n## Requirements\n\n- [Angular.js 1.3+](http://angularjs.org) \n- [ngAnimate](https://docs.angularjs.org/api/ngAnimate) (optional for typehead animation)\n- [ngDragDrop](https://github.com/codef0rmer/angular-dragdrop) (optiona, only if you need drag n drop sorting)\n\n## Installation\n### Add library\nThis module is available as bower package, install it with this command:\n\n```bash\nbower install angular-tag\n```\n\nand it's available too as npm package, install it with this command:\n\n```bash\nnpm install angular-tag\n```\n\nor you may download the [latest release](https://github.com/theo4u/angular-tag/releases)\n\n### Include library\n```html\n\u003clink href=\"/angular-tag/angular-tag.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/angular-tag/angular-tag.min.js\"\u003e\u003c/script\u003e\n```\n### Add dependency\n\n```javascript\nvar app = angular.module('myModule', ['angular-tag']);\n```\n  \n## Example\n `/example.html`\n```html\n  \u003c!DOCTYPE html \u003e\n  \u003chtml lang=\"en\" ng-app=\"example\"\u003e\n  \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n      \u003ctitle\u003eTag Test\u003c/title\u003e\n      \u003c!--Dependencies for ngDragDrop--\u003e\n  \u003cscript src=\"bower_components/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"bower_components/jquery-ui/jquery-ui.min.js\"\u003e\u003c/script\u003e\n  \n  \u003cscript src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"bower_components/angular-animate/angular-animate.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"bower_components/angular-dragdrop/src/angular-dragdrop.min.js\"\u003e\u003c/script\u003e\n  \n  \u003cscript src=\"dist/angular-tag.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"dist/angular-tag.min.css\"/\u003e\n  \n     \u003cscript\u003e\n         angular.module('example',['ngAnimate','angular-tag', 'ngDragDrop'])\n  \n           .controller('MainCtrl',function ($scope) {\n      $scope.data=[{texti:'Jss1',added:'test'},{texti:'Jss2',add:'test3'},{texti:'Jss3',value:'owk'}];\n      $scope.selected=[];\n  \n               $scope.max=2; //set the maximum number of tag entry\n               $scope.delimiter=[\",\",\"x\",\"-\"];\n  \n        $scope.tagUpdated=function (event) {\n                  console.log(\"Event:\"+event.action);\n                  console.log(event.item);\n               };\n      })\n     \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody ng-controller=\"MainCtrl\" \u003e\n  \u003cp\u003eTag Me\u003c/p\u003e\n  \u003cp\u003eData: {{data}}\u003c/p\u003e\n  \u003cp\u003eSelected: {{selected}}\u003c/p\u003e\n  \u003cp\u003eMax Selected Allowed: {{selected.length+\" in \"+max}}\u003c/p\u003e\n  \u003ctag-me type=\"input\"\n          data=\"data\" selected=\"selected\"\n          display-field=\"texti\"\n          theme=\"material\"\n           max=\"max\" delimiter=\"delimiter\"\n          on-tag-maximum=\"tagUpdated(event)\"\n          on-tag-added=\"tagUpdated(event)\"\n          on-tag-removed=\"tagUpdated(event)\"\u003e\u003c/tag-me\u003e\n  \n  \u003cp ng-init=\"selectedi=[{text:'Test'},{text:'three'}]\"\u003eSelected: {{selectedi}}\u003c/p\u003e\n  \u003ctag-me\n          type=\"input\"   selected=\"selectedi\"\n          placeholder=\"your own placeholder\"\n          typehead=\"false\" allow-outside-data-set=\"true\"\n          same-input=\"true\"\n          on-tag-added=\"tagUpdated(event)\"\n          on-tag-removed=\"tagUpdated(event)\"\n          on-tag-active=\"tagUpdated(event)\"\n  \u003e\n  \u003c/tag-me\u003e\n  \u003cbr\u003e\n  \u003cp\u003e\n      \u003cstrong\u003eUsing Required in Form Instance\u003c/strong\u003e\n       \u003cpre\u003ethis disables the form submit button when the form is $dirty , better use with angular form\u003c/pre\u003e\n  \u003c/p\u003e\n  \u003cform name=\"formName\"\u003e\n      \u003ctag-me name=\"fieldName\" type=\"input\"\n              data=\"data\" selected=\"selected\"\n              display-field=\"texti\"\n              theme=\"material\"\n              max=\"max\" delimiter=\"delimiter\"\n              on-tag-maximum=\"tagUpdated(event)\"\n              on-tag-added=\"tagUpdated(event)\"\n              on-tag-removed=\"tagUpdated(event)\"\n              required=\"true\"\n      \u003e\u003c/tag-me\u003e\n      \u003c!--you error template here--\u003e\n  \u003cspan style=\"color: red;\" ng-show=\"formName.fieldName.$error.required\"\u003e\u003cstrong\u003eTag Me is Required\u003c/strong\u003e\u003c/span\u003e\n      \u003c!--end your error template--\u003e\n\n      \u003cbutton type=\"submit\" ng-disabled=\"formName.fieldName.$error.required\"\u003eSave\u003c/button\u003e\n  \u003c/form\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e\n```\n \n## Options\nThe tag works separately with the options based on the value\n### theme \n    it comes with two themes which can take the value of `default` or `material`. if used optionally it takes\n     the default of `default`\n### type\n    for now the type is just for `input`\n### data\n    if set , is where what `angular-tag` use in our data set to check if the entered item match any of the \n    fields/items in it or in filtering **typehead**\n### selected\n    return the selected item(s)/tags here, which can be used for other processing\n### sameInput\n    to allow same input , that is a selected item can appear more than once in our tagging system, \n    takes either `true` or `false`\n### allowOutsideDataSet \n    if the allowed input should be outside the data set specified in `data` , takes either `true` or `false`\n### typehead\n    used in turning type head to assist users when typing or not , takes either `true` or `false`, if animation is wanted \n    simply inject ngAnimate to your app module to see the type head in action\n### displayField\n    field to display to the user in the data set to the tag view , i.e which field to show to the user \n    when typing or when adding tag, default if not specified uses the `text` object field parameter like in {text:'text'}\n### placeholder\n    assist users so they can use their place holders , if not placed it would use the default placeholder which is \n    `Enter Text with , separated`\n### delimeter\n    delimiter to separate the text entered, checks if the user hit on the delimiter activate the tag, default it uses `,` \n    and always uses `Enter Key` along side\n### max\n    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\n### required\n    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\n### name\n    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**\n\n## Events\n 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\n```bash\n        onTagAdded //this is send along the added item object\n        onTagRemoved //this also send along the item object removed \n        onTagActive //this also send along the selected active selected tag\n        onTagMaximum //this event is also triggered with the input typed returned too\n```\n and `event.item` is the tag object or accompany parameter. Used in the example html above\n \n## Demo\n \n You can see the directive in action in the [demo page](http://theo4u.github.io/angular-tag/).\n \n## Contributing\n \n### Setting up your environment\n\nHere's what you need to do before start working on the code:\n\n1. Install Node.js (0.10.22 or higher)\n2. Install `gulp v4` globally\n\n        npm install -g 'gulpjs/gulp.git#4.0' karma-cli\n3. Clone your repository\n\n        git clone https://github.com/\u003cyour_github_username\u003e/angular-tag\n\n4. Go to the angular-tag directory\n\n        cd angular-tag\n\n5. Add the main angular-tag repo as an upstream remote\n\n        git remote add upstream https://github.com/theo4u/angular-tag\n\n6. Install the development dependencies\n\n        npm install\n        bower install \n\n### Building from the source code\n\nYou can build angular-tag with a single command:\n\n    gulp build\n \nThat 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:\n\n    angular-tag.js\n    angular-tag.css\n    angular-tag.min.js\n    angular-tag.min.css\n\n### Running It on local server\n 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\n\n    gulp serve\nThe 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\n\n## License\n \n See the [LICENSE](https://github.com/theo4u/angular-tag/blob/master/LICENSE) file.\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoomoregbee%2Fangular-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheoomoregbee%2Fangular-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoomoregbee%2Fangular-tag/lists"}