https://github.com/chrispittman/angular-taglist

An Angular module for editing lists of freeform tags
https://github.com/chrispittman/angular-taglist

Last synced: 3 months ago
JSON representation

An Angular module for editing lists of freeform tags

• Host: GitHub
• URL: https://github.com/chrispittman/angular-taglist
• Owner: chrispittman
• License: mit
• Archived: true
• Created: 2013-06-28T22:26:20.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-01-08T21:18:20.000Z (almost 11 years ago)
• Last Synced: 2024-08-18T01:03:08.166Z (4 months ago)
• Language: JavaScript
• Size: 252 KB
• Stars: 12
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
angular-taglist

===============

An Angular directive for editing lists of freeform tags.  Inspired by [xoxco's jQuery plugin](https://github.com/xoxco/jQuery-Tags-Input).

Instructions

------------

Download this github repo and include it in your code.  We're also available on bower (as 'angular-taglist').

Include 'angular_taglist_directive' as a dependency in your angular module.

Drop a `taglist` tag into your HTML surrounding an `input`:

    

If you want more control over the `` tag in the tag list (for example, to add form validation or to set placeholder text), go for it:

    

Some basic examples are [on Plunker](http://plnkr.co/edit/0vzZsn70SGQkIKKZoVEP?p=preview).

With Typeahead

--------------

Angular-taglist should work well with a typeahead plugin such as the one in angular-ui-bootstrap.  If you make your angular app depend on ui.bootstrap:

    

      angular.module('test', ['angular_taglist_directive','ui.bootstrap'])

      .controller('testController', ['$scope', function($scope) {

        $scope.colors = ["white","black","red","orange","yellow","green","blue","purple","violet","indigo","brown","gray","amber","chartreuse"];

        $scope.tags1 = [];

      }]);

    

    

...and use the typeahead attribute from ui-bootstrap on your input:

    

      

    

...you should get a popup suggesting values for your tags.  (The taglist-blur-timeout attribute handles the 

click on one of the popup values - we want to give that the typeahead plugin a little time

to finish before we grab the value that it inserted.)

Versions

--------

* 0.0.x - initial versions

* 0.1.0 - rewrite & cleanup; all taglist attrs other than tag-data dropped in favor of giving direct access to the 'input' tag

* 0.1.5 - added taglist-blur-timeout attribute to support autosuggested tags