amitava82 / angular-multiselect Goto Github PK
View Code? Open in Web Editor NEW[NOT MAINTAINED]Native AngularJS multiselect directive
Home Page: http://amitava82.github.io/angular-multiselect
License: MIT License
[NOT MAINTAINED]Native AngularJS multiselect directive
Home Page: http://amitava82.github.io/angular-multiselect
License: MIT License
When clicking on an item in a multiselect list, it should be the case we can prevent the hiding of the dropdown list. This allows a user to select several items without reopening the list each time.
My method for implementing this is (at line 245):
function clickHandler(event) {
if (elementMatchesAnyInArray(event.target, element.find(event.target.tagName))) {
element.addClass('open');
return;
}
...
Hi! I just want to notice you about your example code, because it is obsolete against the code published within your repository.
With the code pulled from your repo, i couldn't get the selected object (complete (id & name)), because the tool was just mapping the name from the select list.
Example:
if i have this array: [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:1, name: 'Honda'}] and i select the first option on the dropdown...it shows:
['Honda']
You can see this example here: http://plnkr.co/edit/BBJWIY?p=preview
After a while I copied the entire code from your plunker example file, called 'multiselec.js' and it works fine now.
Am I missing something? I mean, is there any way to get the selected object entirely ('name' and 'id' attributes) using the code published on your repository?
PD: By the way, sorry about my poor english! =/
Hi. How i can clean the selected items after a form submission?
The previous selected items are still marked as checked.
Thanks!
Getting this error:
ENOTFOUND Package amitava82/angular-multiselect=amitava82/angular-multiselect not found
Does it work with it ?
The new change #30 seems to break the name of the value being viewed in the selectbox.
So in @nathantsoi case: item.id as item.name for item in my_rad_items
I should be seeing item.name in the selectbox when I select an item in single mode but instead i get to see 'Select:' on the selectbox as the selected value.
So it's a visual bug:
But the model functionality does work:
Hi guys, thank you for a wonderful directive, I just have one issue.
When using the directive in a form with a ng-submit, when clicking on the multi select is submits the form.
Plunker as follow:
http://plnkr.co/edit/8GlvpneIRayOk6Ve92TO?p=preview
Clicking on any one of the selects, you get console log output of 'Multi select ng-submit called and run...'
Please help...
I changed checked: true in parseModel() to make all the entries selected on page load.
Now even if I uncheck a few entries, all the entries are still sent in the request.
When the options are populated dynamically, the items are not checked.
quick fix is to add a markChecked(). Better is to modify parseModel
scope.$watch(function () {
return parsedResult.source(originalScope);
}, function (newVal) {
if (angular.isDefined(newVal))
parseModel();
markChecked(modelCtrl.$modelValue);
}, true);
The selections result model includes whole objects, but default AngularJS multiple select model has only array with id, here is plunker with default multiple select http://plnkr.co/edit/NWLZyrQGmFra2rO6wMg5?p=preview
Hey.. it would be awesome to be able to include this via bower!
Cheers and thanks for the cool plugin,
daniel
Keybord support would be great, like in http://davidstutz.github.io/bootstrap-multiselect/.
Create new option, like template="myCustomTemplate.html", that would make it possible to do a lot of custom things with the multiselect. And it is very easy to do), I believe.
Sorry I submitted so many issues today. I'm really trying to get a multi-select solution in place. I've had a couple failed attempts at using other projects I found and it looked like your project might be perfect for me.
Before I go too much further, I do want to know if you plan to actively maintain this project. I'm willing to offer some help, but if you're not really into it, I will either fork, or choose another project. I see you have labeled it a "work in progress" and there is some definite room for improvement, but I really like this project's foundation.
Please let me know what you think.
on line 27 of multiselect-tpls.js:
.directive('multiselect',// ...
.directive()
is called after a semi-colon on line 25. Resulting in:
Uncaught SyntaxError: Unexpected token .
Current bower file only installs the module partially. It multiselect.js from src folder. dist(ribution) folder not included. Also css and template file missing there too.
I think it would be nice to rename this file to be something a bit more specific, like multiselect.css
. This seems to be the common practice for angular libraries
In my case will prevent me from having to make changes to my build step. (it currently takes a list of css file paths and moves them into a folder named vendor.) So... for your library I will be including vendor/style.css
which is a bit ambiguous.
It would be nice if the "Filter" field would automatically receive focus when:
Click and type, rather than click, click and type.
@amitava82
I like your clean selection box widget. Since the options are getting larger and larger, is there a scroll bar for me to control?
In app.js you have this line:
$scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:1, name: 'Honda'}];
It should be:
$scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:3, name: 'Honda'}];
Note that the Honda id is currently one, but probably should be 3 if you need them to be distinct. This works fine as it is now, but if you change the line in index.html
options="c.name for c in cars"
to
options="c.id as c.name for c in cars"
bad things happen.
if you change the ng-model object, the "Selected Count" updates, but the check boxes don't refresh.
Steps to reproduce:
1: Check a couple options.
2: Remove one of the options.
3: Note that the selected text updates
4: Note that the check mark doesn't get removed for that item.
i might not be using the most recent version
Hi there, i am trying to make this multiselect with fixed fiters and buttons and scrollable options. i am able to do it but the button size somehow increasing when i toggle the select. also its was very bad in ie9.
please suggest solution
I wasn't able to find this package at NPM.
If it isn't already, can you please publish it?
https://docs.npmjs.com/cli/publish
This will make life easier on those who use NPM for front-end dependency management
Does it (or can it be modified) to show the select items in multiple columns if space permits ?
See demo plunker.
Can you add licensing terms to your code. Please consider releasing under MIT, Apache or BSD.
Bower is all but dead, and even its core team suggests using NPM instead for package management.
Chrome works fine. Not working on FF and IE 10
We have a lot of JSHint validation issues. It will be great to fix it.
Per the example at http://plnkr.co/edit/LPGYIf?p=preview, I'm using one property of my option objects as the name for the option, with options="t.name for t in tags".
Rather than use the entire option object as a value, I want to only use the _id property, so that the model I bind to contains a list of _id Strings, rather than a list of Objects. This matches my backend, where my MongoDB documents have _id references to other documents.
Is it possible to use a single property as the value of an option, e.g. values="t._id for t in tags"?
My code is live at http://trollsgoals.ayoshitake.com/
It is considered best practice to have angular directive names contain a dash. (my-directive
). This prevents collisions with any potential html elements that may be added to the spec in the future. The W3C has stated that they will not create any html elements or attributes (aside from data-
) that contain dashes, so custom elements can use them safely.
Perhaps multi-select
like similar plugins use? Or maybe ami-multiselect
would be better?
isMultiple = attrs.multiple ? true : false
always true because attrs.multiple is string, no?
here: https://github.com/amitava82/angular-multiselect/blob/master/src/multiselect.js#L41
run:
bower install amitava82-angular-multiselect --save
all ok.
Then run bower install ... and got:
bower angular-multiselect=amitava82-angular-multiselect#^1.0.0 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/amitava82/angular-multiselect=amitava82-angular-multiselect.git", exit code of #128 fatal: remote error: amitava82/angular-multiselect=amitava82-angular-multiselect is not a valid repository name Email [email protected] for help
Additional error details:
fatal: remote error:
amitava82/angular-multiselect=amitava82-angular-multiselect is not a valid repository name
Email [email protected] for help
I'm facing an issue with your directive: when put inside a form clicking on the button to open the multi-select submits the form.
This can be reproduced in your plunkr by wrapping your <multiselect> by a <form action=""> and you will see that as soon that you click on them the user is redirected. Is that expected?
I tried to fix this but even when commenting out:
if (element.hasClass('open')) {
element.removeClass('open');
$document.unbind('click', clickHandler);
} else {
element.addClass('open');
$document.bind('click', clickHandler);
scope.focus();
}
in your code I just prevent the multiselect popup from opening and the form is still submitted.
Do you know why this happen and how to fix this? Or even just where I could start searching.
I reproduced with 0500a40 and your sample as of now.
'restrict E' is not supported in IE, 'restrict A' better
Hi!
Is there a way to change multiselect's header?
I have 3 multiselects and I'd like them to have different headers.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library amitava82/angular-multiselect
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "amitava82/angular-multiselect",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Dear friends,
I have found an issue like "required" validation doesn't work as expected in ng-repeat. This is code wangpin's test. First multiselect is simple , second one is in ng-repeat where issue happened. The valid state should be false like first one,but it is true. It seems some conflicts happened between ng-repeat and multiselect but I have no idea on this. Please help.
Thanks.
It looks like multiselect-tpls.js is currently a bit out of sync.
This file should probably be generated by gulp using gulp-angular-templatecache
With a large dataset, displaying all the options without scrolling or pagination is a bit overwhelming.
It is not currently possible to allow scrolling with css alone on the current template since the filter and (un)check all controls are in the same ui > li
as the options.
When I get a chance I'll submit a PR separating out the option list from these controls, to allow setting scrolling with css.
I'm curious what your thoughts are on adding this option via the directive's attributes (maybe a max-height) or whether it should be up to the user to implement themselves via css.
If I have an angular enhanced form like such:
<form ng-submit="submit()">
<multiselect></multiselect>
</form>
Clicking on the multiselect
directive causes a form submission. This is caused by the <buttton>
element in the template not having the type button
.
I have a fix for this, but I'm currently at work. I'll send a pull-request the moment I get home.
Has anyone actually tried the disabled state? If I would put ng-disabled="someExpressionThatEvaluatesToTrue" then the multiselect will not get disabled.
The line $parse(attrs.disabled)(originalScope) seems to return undefined.
I don't understand why you closed to issue... But the fix would be to change the code so:
scope.$watch(function () {
return attrs.disabled;
}, function (newVal) {
scope.disabled = newVal;
});
You can test at http://amitava82.github.io/angular-multiselect/ and add a disabled attribute to one of the select boxes there and see that it does not work currently.
Thanks!
I've tried run bower install angular-multiselect
but a whole different package is added to my project...
Hi I'm trying to use the injection, but when I try to multiple select items i get the following error: c.setclass is not a function
What might be the problem ?
Thanks
Can you add licensing terms to your code. Please consider releasing under MIT, Apache or BSD.
it is changeHandler = attrs.change || angular.noop;
but in your specified plunker code: changeHandler = attrs.change || anguler.noop;
not an issue although
I need to show a multiselect dropdown with more than 1 lakh options. When tried to give an array of more than 1 lakh numbers (each option will look like: 12345-67589-10) the browser stucks and i need to close window and restart browser again. I used limitTo in ng-repeat. Still got issue. The problem is with watch function for options.-
scope.$watch(function () {
return parsedResult.source(originalScope);
}, function (newVal) {
if (angular.isDefined(newVal))
parseModel();
}, true);
Please give a fix for this asap. I am stuck with this. I need to show a multiselect dropdown with more than 1 lakh options. When tried to give an array of more than 1 lakh numbers (each option will look like: 12345-67589-10) the browser stucks and i need to close window and restart browser again. I used limitTo in ng-repeat. Still got issue. The problem is with watch function for options.-
scope.$watch(function () {
return parsedResult.source(originalScope);
}, function (newVal) {
if (angular.isDefined(newVal))
parseModel();
}, true);
Please give a fix for this asap. I am stuck with this.
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.