after Angular version 1.3 angular team recommend to use 3rd party filter toArray which works great. Your implementation loose key value. That i suggest to rename Your filter or remove it

Hello Eran,
I would like to limit the number of tags.
Possible to have an option to set the maximum number of input tag from 1 to ... unlimited ?
Thank you,
Philippe

Is there a simple way of binding the tags, as an array of strings or otherwise, to a property on the controller's $scope?
Something like this:

<js-tag ng-model="favoriteDishes"> </js-tag>

Thanks!

Hello Eran.
How I can set edit mode for tag on one click? Not on double.

I would like to know if this plugin checks if a particular tag already exists.

After typing some text in input, and pressing enter, I got this error:

TypeError: undefined is not a functionat InputService.onKeydown
(file:///tmp/jstagtest/bower_components/jsTag/jsTag/compiled/jsTag.debug.js:309:16)

At line no. 309, trigger function is called on the event jsTag:breakcodeHit, but as per list of available jqLite methods for angular.element, only triggerHandler function is allowed.

I have an js-tag input area, and a save button below the area, each time complete typing in the input area, and click on the save button, the js-tag will block the on click event and only trigger the un-focus event,

Steps for reproduction, using code from the example at http://eranhirs.github.io/jsTag/#moreControlDemo

1. Add $scope.$watchCollection('tags', function(new, old) { console.log("firing") });
2. Add tags, the watcher should watch as expected.
3. Remove tags, the watcher doesn't fire.

Hi, i cannot set or use the code "44" for "," . I need this to separate the tags, with keyboard key enter its works perfectly.

Great plugin! I found an issues using w3 validation when using the element syntax:

<js-tag></js-tag>

This also doesn't work if there was a JavaScript error on the page the input wouldn't show. A better method would be to do the following:

<label for="tags">Tags</label>
<input id="tags" type="text" placeholder="Enter tags (separated by commas)" class="js-tag" />

The update your directive to have restrict = 'c' and replace = true to replace the input with class="js-tag":

jsTag.directive('jsTag', ['$templateCache', function($templateCache) {
    return {
        restrict: 'C',
        scope: true,
        controller: 'JSTagMainCtrl',
        replace: true,
        templateUrl: function($element, $attrs) {
            var mode = $attrs.jsTagMode || "default";
            return 'jsTag/source/templates/' + mode + '/js-tag.html';
        }
    };
}]);

This validates as html5 compliant and provides a working input field if the library where to fail for some reason!

Additional features could be:

• Grab the placeholder text from the input field, for your tags text
• Apply an option to only load the directive on desktop computers vs mobiles

In my bloodhound options I'm transforming the remote suggestions into an object like so:

filter: (parsedResponse) ->
    _.reduce parsedResponse, (all, suggestions, key) ->
        suggestions = suggestions.map (suggestion) ->
            field:   key
            content: suggestion
        all.concat(suggestions)
    , []

This becomes something like:

[
    {
        "field": "site",
        "content": "GitHub"
    },
    {
        "field": "repository",
        "content": "eranhirs/jsTag"
    }
]

Then I use a template in the typeahead data source options to render my typeahead suggestion items into a mustache template. This works well.

However, when a suggestion is selected and a tag is added the value of the first key in the item object (field in this case) is chosen to be the one that becomes the tag (due to this code).

Ideally I'd be able to choose which key whose value becomes the tag. This could be specified in the options somehow, for example:

$scope.jsTagOptions = 
    edit: false
    tags: $scope.tags
    tagDisplayKey: 'content'  # <- my proposed option

That way we reliably know which field of the suggestion object will become the added tag. It will also behave well in javascript engines that don't reliably keep the ordering of key to value associations in objects. This ordering is not guaranteed in js!

is it possible to get the get tags completed when the user hits the , sign ?

for example if he writed

a,b,c

i would have 3 tags

a
b
c

Hello eran,
I'll open some issues to list functionnalities I'll love to have with your module.
To motive you :-) but no pressure !
First, possible to have some tags locked ? So user can't edit or suppress them.
Thank you

For example when selecting "performance" without pressing the Return button, it shows only "perform" in the input tag

Hi there,
Thanks for making this nice project, I would like to know if you can please help with an issue, when I scroll down en select the suggestions with the arrow and then press enter, it doesn't add the full name of the tag, it adds just the number of letters you are typing, my code looks the same to the Twitter's typeahead example you have on the jsTag page demo, any idea why??

Hello Eran,
Possible to have an option to prevent user from edit tags ?
Editing tags is a good fonctionnality, but sometimes it's a bit confusing.
Thank you,
Philippe

// Check if should break by breakcodes
if ($filter("inArray")(keycode, this.options.breakCodes) !== false) {

  inputService.breakCodeHit(tagsCollection, this.options);

  // Trigger breakcodeHit event allowing extensions (used in twitter's typeahead directive)
  $element.trigger('jsTag:breakcodeHit');

  // Do not trigger form submit if value is not empty.
  if (!valueIsEmpty) {
    e.preventDefault();
  }

} 

the $element.trigger is undefined, this will throw an exception

useful for updating data on the server when data on the client changes...

It's not clear from the docs how to access tags. Adding 'ng-model' to the element doesn't work. What's the method here to access my entered info? Docs should say.

At the moment there is no documented way of binding a model to the directive so that we can get the tags object and run searches against the results. This seems like a major missing feature as most peoples use of this library would be to bind their own model on the directive to get tabs

Hi!
I can't install the latest version with bower, seems to do with the version number and that it's more than 3 numbers long.

Best regards,
Robin

jsTag works fine with $scope.exampleData and $scope.exampleOptions, as stated in the documentation.
There must be a way to specify the dataset and the options, via the directive maybe. That's how you do it in angular-typeahead.

Thank you for your code.

Hi Eran!
I like your jsTag very much. Recently i started using (and learning) Angular and this is exactly widget i am used to from jQuery :)

jsTag is dependat to jQuery, which is not documented anywhere. In compiled version (didnt search sources), there are theese lines (for example):

return b.prototype.onKeydown = function (b, c, d) {
        var e = d.$event, f = e.which, g = $(e.currentTarget);

where $(e.currentTarget) needs jQuery. (without jquery, there is error. With included jquery, its ok)

Ideally, i would like jsTag not to be dependand to jQuery sice i dont want to include it beside Angular to my project(s). But mainly i want you to know you have some undocumented dependencies :)

Have a nice day,
Arcanis

Hello,
Thank you for this great job !
I have some questions :

• is that possible to allow user to enter its own value in typeahead mode ?
• is that possible to filter out from typeahead suggested tags some tags that are already choosen ?

Philippe

I've trying to use ng-model="aModel" inside js-tag element. But nothing gets bound.
With this code, as in the examples, I can get the value selected through $scope.tags.tags:

$scope.tags = new JSTagsCollection([]);
$scope.jsTagOptions = {
  'tags': $scope.tags,
  "texts": {
    "inputPlaceHolder": "diag..."
  },
  'edit': false,
  'breakCodes': [13, 32] //32 for space
};

The format of the value of $scope.tags.tags I get is

{"0":{"value":"first","id":0},"1":{"value":"next","id":1}}

The keys "0", "1" and the property "id" need some explanation.

Thank for opening your code. It's been of great value for me.

Bootstrap V3 do not include Typeahead anymore.
Could you plan tu use Typeahead from Twitter ?
Same developpers, but more fonctionnalities.
https://github.com/twitter/typeahead.js

Thank you
Philippe