mbenford / ngtagsinput Goto Github PK

In Firefox, when pressing backspace in a non-empty input field the characters are not deleted as they supposed to be.

We're using this to add names and emails (ala Gmail To field). So we need to disable the replacing of spaces with dashes.

now maxLength is implemented as attribute in template and min as condition in controller, which is inconsistent (both in code and in tests) and - in the case I run into it - adds complexity to project unit tests of modules which use this function.

It'll also make it easier to validate min and max (to define ng-invalid-* helper class)

Awesome tool! I suggested it for CDNJS hosting.
Is there a quick way to add typeahead functionality to the input by combining the directives somehow?

Quickly checking the demo in your site I found out that I probably cannot write greek letters in the tag.

Regards

Petros

The last tag is removed when backspace is pressed and the input box contains only white spaces.

Autocomplete directive should have a configurable debouncing interval so the source function doesn't get overloaded.

Hi, i'm probably doing something wrong, but i can't add hebrew characters to tag-input..

i've tried this:
allowedTagsPattern="^[\u0590-\u05FFa-zA-Z0-9\s]+$"
with no success,still only english.
But then i've tried to accept everything:
allowedTagsPattern="[\s\S]"
Also, same default behaviour, only english..

can you help me please and tell me what am i doing wrong?
Thanks!

When the autocomplete's suggestion list is visible and the user types a new character that invokes the load function and it returns an empty array, the suggestion list remains visible even though there's nothing to show.

It would be nice to be able to use the down arrow key within the autocomplete box to get a complete list of all available tags. This would most likely need to be a scrolling list of tags using the current setting for the number of tags shown in the autocomplete as a means of determining the maximum height of the box. The Select2 jQuery plugin does this and it's a nice feature for users that can't find the tag they're looking for.

Hi guys,

i suggest to implement feature add separate property that will store only key for selected tags.
So, source will be like key value dictionary and when user select some tag from autocomplete - we will store only key for this tag.

Also, is there any way to reject manually entered test if its not matched with any of tags in predefined source.
For example we have in source tree tags: 'aaa', 'bbb', 'ccc'. User manually try to enter value 'ddd'. Currently directive will add it when you finish edit. But for me more usefully case reject entered text if we have no it in source list.

What do you think?

I'm using tags of the form "Kris Braun [email protected]". Left angle brackets cannot be entered in the input field. (Worked with 0.15, broken in 1.0.)

The directive is missing a focus outline to clearly indicate it's the active element on the page. That is critical for keyboard users that rely on the outline to know where they are on the page.

Hi,

It does not seem to work with angular 1.2 [1]. Do you have plans to support this version?

[1] - http://plnkr.co/edit/lPbBs49nmFsnrivuVnkn?p=preview

Autocomplete could have a limit property so it's possible to control how many items are rendered at a time.

Now that version 1.1.0 is out and support for ngModelController is available, the tagsInput element should support Angular's validation classes (ng-valid-*, ng-invalid-*, ng-pristine and ng-dirty) so it can be styled according to its state.

I am using angular 1.2.0 with the latest ng-tags-input build. I thought I cut and pasted the examples directly into my code but I am getting this error when I refresh the page:

TypeError: undefined is not a function
at http://localhost:8080/app/vendor/ng-tags-input/ng-tags-input.js:464:9

...which means that in this function...

  tagsInput.directive('transcludeAppend', function() {
      return function(scope, element, attrs, ctrl, transcludeFn) {
          transcludeFn(function(clone) {
              element.append(clone);
          });
      };
  });

...transcludeFn is not defined. My template contains this...

  <tags-input ng-model="tags" placeholder="Add a tag">
    <auto-complete source="loadTags($query)"></auto-complete>
  </tags-input>

...and my controller contains this...

$scope.loadTags = function(query) {
  return $http.get('/tags?query=' + query).then(function(response) {
    return response.data;
  });
};

...please help?

Unable to load autocomplete directive due to

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'ngTagsWidget', can't be found!

Autocomplete list remains visible when the input loses focus and a tag isn't added. #51 has more information on the problem.

Autocomplete directive's source property should comply with Angular's guidelines for expression properties. In other words, this

<autocomplete source="func"></autocomplete>

should be changed to this

<autocomplete source="func(text)"></autocomplete>

When I type "John/Doe" and hit enter, nothing happens. what could possibly be the reason?

To complement #24, the directive could also have a minTags option that renders the element invalid when the number of added tags is lesser than the provided value. In order to mark the element as invalid, the solution for #45 could be used.

I'm autocompleting email addresses in the form "Kris Braun [email protected]". As of 1.0, angle brackets need to be escaped to display in the autocomplete list, but show up raw (e.g. <) in completed tags.

The ngTagsInput website should be updated with all changes to be introduced in v1.0.

Autocomplete directive should wait for a certain number of characters to be entered before it calls the load function.

Is there a way to intergrate typeahead into this awesome directive? It is awesome enough by it's own, but with a typeahead functionality it would be mother of awesome

Autocomplete should highlight the matched text in the suggestion list so the search terms can be easily spotted.

Tags input could have a max-tags option in order to limit the number of tags that can be added.

Does it have a bower package?
Thanks!

For example if i want to use angular-translate for the placeholder in the input:
placeholder="{{ 'ADD_CATEGORIES' | translate }}"
if won't get the value (although that in regular input it does work fine).

Thanks man, good job

It would be nice if the autocomplete directive supported $http promises in addition to regular ones, so the following code would work:

$scope.loadItems = function(query) {
    return $http.get('/tags?query?=' + query);
}

Currently some boilerplate code is needed to achieve the same result:

$scope.loadItems = function(query) {
    return $http.get('/tags?query?=' + query).then(function(response) {
        return response.data;
    }
}

It would be nice if the directive had support for ngModelController so it could report validation errors the same way a regular input does.

hi!
if i write smth like
input autocomplete="off"
anywhere in my project, it thinks that its a directive, so it doesnt find stuff its meant to and throws an error.

since you test autocomplete directive only as an element, apparently you mean it to be used as an element, so you could restrict it to 'E' and not 'AE'.

and of course you could just rename it =)

Autocomplete directive should filter out tags that are already added since they won't be allowed to get added again.

There could be a way to globally configure options for tagsInput/autocomplete, so applications which have more than one tags input control wouldn't have to do that at several places. Of course, each control would be able to locally override global options by simply re-setting them.

Please add the licensing under which you are sharing this code!

Thanks!

When the backspace key is pressed and the input box is empty and the enable-editing-last-tag is true, the input box doesn't fit the tag length and doesn't display it entirely.

This is most obvious when quickly typing a long tag and blurring the field. If the server is slow, the autocomplete list will pop up again several times.

Suggestions box doesn't get hidden when the input field becomes empty after trying to insert an existing tag.

I am using autocomplete with database values .. the http response looks like the following
["tag1","tag2"]

I am using latest version of ngTagsInpute and angularjs 1.2.4.
Maybe I am not formatting the tags correctly.
Autocomplete is not shown.

Chrome console output

TypeError: Object # has no method 'forEach'
at e (http://mydomain.com/assets/ngTagsInput/ng-tags-input.min.js:1:3261)
at http://mydomain.com/assets/ngTagsInput/ng-tags-input.min.js:1:3636
at C (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:92:79)
at C (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:92:79)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:93:245
at h.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:101:273)
at h.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:99:93)
at h.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:102:100)
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:67:241)
at K (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:71:149)

After i minify the file, it throws me the next error "Unknown Provider" http://docs.angularjs.org/error/$injector:unpr?p0=aProvider%20%3C-%20a

haven't changed anything in the file, have tried all of the versions that you have provided and it always throws me the same error. before minification, it seems to work just fine.

btw,im using uglify if it matters..

Currently the directive only supports arrays of strings as a list of tags. Although that probably covers most use cases, it could also support an array of objects so applications that have a list like this

[
    { id: 1, name: 'Tag 1' },
    { id: 2, name: 'Tag 2' },
    { id: 3, name: 'Tag 3' }
]

wouldn't need to convert it to an array of strings in order to use ngTagsInput. That introduces a new problem, though. Since a tag now carries more information than just its "name", a user won't be able to create a new tag by simply typing a string. Adding a tag will only be possible by selecting an autocomplete suggestion.

Hi,
thanks for creating such a great plugin. However, would u check on this page:
http://mbenford.github.io/ngTagsInput/demos.html

As my images shows, when I type 'Mission' and select autocompleted item, it cannot be transformed into a tag. Is this normal?

Thanks

Great project! Helped us remove jQuery.

We're seeing users type a tag (email addresses in our case) and then click 'Send' without typing comma or enter to complete the tag. Is there a way we can read any text in progress, or force tag completion?

Currently the directive is incompatible with Angular 1.2+ and it only works with 1.0.x versions. I'm aware of two issues so far:

• ngTransclude has changed in v1.2 and now it removes any existing content of the element it is applied to. And since it's placed on the ngTagsInput's main element, it wipes the directive out of the DOM;
• element.scope() no longer retrieves the isolate scope of an element; element.isolateScope() should be use instead. That basically breaks all unit tests using scope();

But I think it won't stop there...

Minification of script files can be improved by doing at least two things:

• Removing empty spaces from template strings;
• Replacing angular.module('tags-input') with a shared variable.

Both should be done during the build process so the code remains legible.

When selecting an autocomplete tag (using the mouse or enter), it'd be great if it appeared in the text input as a tag rather than editable text. Could be an option if some need it to be editable.

Currently when one tries to add a duplicate tag, ngTagsInput simply doesn't allow it, without any feedback whatsoever. It would be nice if there were some kind of visual feedback so the user could understand what had just happened.

Some of the defaults can be dynamic, like a placeholder.
Not, once values not mentioned in tagsInput scope, they are treated as plain text.
There should be a way to make config dynamic, bindable.

The directive fails when it's bound to an uninitialized property of the model.