Any suggestions for a "Tags" library that integrates well with AngularJS

[Amit Kumar]

Hi 

I am trying to integrate a "Tags" library in my web application. Right now I am trying out this component - http://xoxco.com/projects/code/tagsinput/?path=projects/code/tagsinput . 

I wanted to ask if someone has used something similar before and got it to work with AngularJS. A google search did not give back any results for "Tags AngularJS "

Thanks & Regards

[Joshua Miller]

Hi!

I am not aware of any such existing library, but one of the things I love so very much about angular is how insanely simple something like this is to implement as a directive. I went ahead and mocked up a primitive one to point you in the right direction; it contains virtually no error/safety checking, is in some ways inefficient, and contains only enough styling to understand its purpose, but it's functional. http://jsfiddle.net/joshdmiller/hAz5A/

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Pawel Kozlowski]

Hi!

On Fri, Jan 4, 2013 at 9:46 PM, Joshua Miller <jo...@joshdmiller.com> wrote:
> but one of the things I love so very much about angular is how insanely
> simple something like this is to implement as a directive.

+1 Joshua!

I can constantly see people spending hours and hours to wrap existing
jQuery plugins (of a various quality) where a AngularJS-native
solution can be done in 1h and in 1/10 of the code.

I'm not saying that everything should be re-written as a native
AngularJS directive but it is often easier & faster to write a
directive using the markup as inspiration. In this example the
mentioned plugin has 350+ lines of (untested?) code and requires
jQuery dependency while the AngularJS alternative is so much smaller.

@Joshua if you feel like writing some more AngularJS-native directives
would be awesome to have you contributing to
http://angular-ui.github.com/bootstrap/ where we are trying to have
pure-AngularJS directives for Twitter's bootstrap.

Cheers,
Pawel

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Amit Kumar]

Thank you very much for the help I will use this approach rather than the Plugin. 

[Amit Kumar]

+1 to Pawel's suggestion . In fact the Tags code by Joshua will be a great help to lot of folks!

[Joshua Miller]

@Pawel - I'd love to help out. While I heard about angular.ui.bootstrap a while ago, I actually just perused it only a few days ago as I coincidentally need some Bootstrap directives. Besides, having a full accompaniment of Bootstrap directives would be great for Angular from a dev relations perspective.

[Emmanuel Nyachoke]

I have just used the same plugin in my angular app. Jst create  a directive called tags like the on below.
var module = angular.module('myApp', []);

module..directive('tags',function(){
    var linker = function(scope,element,attr) {
      //Note here is where I call the plugin
        element.tagsInput();
    };

    return {
        restrict:'A',
        link: linker
    }
});

Then apply the directive to you input like this.

<input tags name="phones" id="phones"/>

This video can also be of use. http://www.youtube.com/watch?v=8ozyXwLzFYs
Hope this solves you problem.