eranhirs / jstag Goto Github PK
View Code? Open in Web Editor NEWPure Angular Input Tags project
Home Page: http://eranhirs.github.io/jsTag/
License: MIT License
Pure Angular Input Tags project
Home Page: http://eranhirs.github.io/jsTag/
License: MIT License
// 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();
}
}
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.
Steps for reproduction, using code from the example at http://eranhirs.github.io/jsTag/#moreControlDemo
I would like to know if this plugin checks if a particular tag already exists.
Hi, i cannot set or use the code "44" for "," . I need this to separate the tags, with keyboard key enter its works perfectly.
For example when selecting "performance" without pressing the Return button, it shows only "perform" in the input tag
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,
useful for updating data on the server when data on the client changes...
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??
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
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
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
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 Eran.
How I can set edit mode for tag on one click? Not on double.
Hello,
Thank you for this great job !
I have some questions :
Philippe
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
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.
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.
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 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!
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
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
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.
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 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
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.