amitava82/angular-multiselect

[NOT MAINTAINED]Native AngularJS multiselect directive

angular-multiselect

Native AngularJS multiselect directive.

Example: http://amitava82.github.io/angular-multiselect/

Contributions welcome!

Installation

npm install angular-multiselect

OR

bower install amitava82-angular-multiselect

OR Include multiselect.js and multiselect.tmpl.html or multiselect-tpls.js (it has template included) from dist folder.

Usage

Please look into the example.

Please look into angularjs doc here https://code.angularjs.org/1.2.27/docs/api/ng/directive/select for options format (array data source) License

The MIT License

angular-multiselect's Issues

dropdown list with fixed filters and scrollable items

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

demo : http://plnkr.co/edit/MAhpkW?p=preview

multiselect-tpls.js has a syntax error

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 .

Add licensing terms

Can you add licensing terms to your code. Please consider releasing under MIT, Apache or BSD.

Filter field autofocus

It would be nice if the "Filter" field would automatically receive focus when:

• a drop-down is first activated (this is working)
• after making some selections, if the user starts typing again

Click and type, rather than click, click and type.

objects not checked when options populated dynamically

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);

Disabled state

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.

Documentation incorrect about installation

I've tried run bower install angular-multiselect but a whole different package is added to my project...

Can I use different option properties as names and values?

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/

Model is inconsistent with the default multiple select model

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

Outside Model changes don't update Checked Icons

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

Unable to "bower install amitava82/angular-multiselect"

Getting this error:
ENOTFOUND Package amitava82/angular-multiselect=amitava82/angular-multiselect not found

spelling mistake

it is changeHandler = attrs.change || angular.noop;
but in your specified plunker code: changeHandler = attrs.change || anguler.noop;
not an issue although

Show selected name when using 'as'

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:

• Name of the selected element is not visible (select box just shows: 'Select:' ).

But the model functionality does work:

• item.id does get set as the model value.

When clicking on element, causes form submission

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.

Re disabled attributes

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.

Use gulp to generate multiselect-tpls.js from multiselect.js

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

Please Tag a Release

Thanks!

Add licensing terms

Can you add licensing terms to your code. Please consider releasing under MIT, Apache or BSD.

"required" validation issue in ng-repeat

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.

Allow scrolling for long list of options.

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.

Popup does not close when clicked outside

Chrome works fine. Not working on FF and IE 10

attrs.multiple is string, isn't it?

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

Clear selected items after form submission

Hi. How i can clean the selected items after a form submission?
The previous selected items are still marked as checked.

Thanks!

Clicking on list item should not hide list

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;
}
...

Bower package

Hey.. it would be awesome to be able to include this via bower!

Cheers and thanks for the cool plugin,
daniel

How to fix conflict with bootstrap's dropdown.js and this component?

Single select always show 'Select' string instead of selected value

See demo plunker.

amitava82/angular-multiselect=amitava82-angular-multiselect is not a valid repository name

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

Dropdown sends all values in request even if only a few are selected

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.

Replace bower with npm

Bower is all but dead, and even its core team suggests using NPM instead for package management.

https://twitter.com/nachocoloma/status/663622545162280960

Feature: Keyboard support

Keybord support would be great, like in http://davidstutz.github.io/bootstrap-multiselect/.

Example incorrect

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.

Not supported in IE

'restrict E' is not supported in IE, 'restrict A' better

.bower.json missing dist folder

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.

JSHint validation

We have a lot of JSHint validation issues. It will be great to fix it.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of amitava82/angular-multiselect!

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!

How to change header?

Hi!
Is there a way to change multiselect's header?
I have 3 multiselects and I'd like them to have different headers.

Clicking on button submit parent form

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.

c.setClass is not a function

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

Rename dist/style.css

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.

browser stuck with large array of options

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.

New option - custom template.

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.

Clicking on multi select auto submits page

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...

Any scroll bar for this widget?

@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?

State of this project?

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.

Obsolete examples

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! =/

Angular 1.3

Does it work with it ?

Multicolumn ?

Does it (or can it be modified) to show the select items in multiple columns if space permits ?

Use a dash in directive name?

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?

Register as NPM package?

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