w11k / w11k-select

w11k-select - Single- and Multi-Select Directive for AngularJS

w11k-select is an AngularJS directive created to replace the default HTML select element which has a poor usability for most use cases particularly in desktop browsers.

Features:

• Single- and multi-select
• High performance and usability even with hundreds of options
• Filter options to find the right one quickly
• Uses Twitter Bootstrap markup / styling, comes with default css but easy to adjust / override
• Disabled state and required-validation
• Customisable texts (placeholders and selected representation)

Documentation and Demo

See Project Website at http://w11k.github.com/w11k-select

Installation

• Install via Bower (w11k-select) or download manually from our release repository (https://github.com/w11k/w11k-select-bower)
• Include scripts into your application (w11k-select and dependencies):
  • AngularJS
  • w11k-dropdownToggle
  • w11k-select
  • font-awesome (optional)
• Inject dist/w11k-select-option.tpl.html and dist/w11k-select.tpl.html into your $templateCache
• Add dependency to w11k-select to your angular module

Usage

<div w11k-select
     w11k-select-config="config"
     w11k-select-options="option.value as option.label for option in options.data"
     ng-model="selected.data"
     >
</div>

w11k-select-options is required and defines the html options elements that will be rendered within the html select element. This is similiar to the behavior of angular's ng-option directive. It follow the pattern of select as label for value in array.

w11k-select-config is optional and takes a config object or an array with config objects. The value is evaluated against the surrounding scope. If an array is given, all contained config object will be merged into one config object internally. Later config objects override values of previous config objects (like jQuery.extend or _.merge).

You can use different formats to specify the configuration. Some examples:

// reference an object or array from scope:
w11k-select-config="config"

// define an object with an object literal:
w11k-select-config="{ required: true }"

// define an array via literal referencing an object from scope and define an object
w11k-select-config="[commonConfig, { multiple: false }]" 

Usage without font-awesome

font-awesome is an optional dependency of w11k-select. w11k-select uses font-awesome classes to show icons. If you don't want to include font-awesome in your project, you can use the following classes to style the icons / define their content. Otherwise they will be empty.

This is a sass example to reproduce the default icons. Notice: You don't need this code if you use font-awesome. The font-awesome classes are already included in the template of the directive.

.w11k-select .icon-deselect-all {
  @extend .fa;
  @extend .fa-times;
}
.w11k-select .icon-dropdown-open {
  @extend .fa;
  @extend .fa-chevron-up;
}
.w11k-select .icon-dropdown-closed {
  @extend .fa;
  @extend .fa-chevron-down;
}
.w11k-select .icon-select-filtered {
  @extend .fa;
  @extend .fa-check-square-o;
}
.w11k-select .icon-deselect-filtered {
  @extend .fa;
  @extend .fa-square-o;
}

Release

1. project
   1. create release branch
   2. npm run package
   3. bump bower version
   4. bump npm version (package.json & package-lock.json)
   5. update changelog
   6. merge release into develop and master branch
   7. git push --tags
2. update demo page
   1. cd demo
   2. npm run build
   3. copy files to 'gh-pages' branch
3. npm package
   1. npm publish
4. bower package
   1. copy release to bower repo
   2. bump version in bower repo
   3. create tag in bower repo
   4. git push --tags

Roadmap

see milestones and issues at https://github.com/w11k/w11k-select/issues

License

MIT - see LICENSE file

w11k-select's Issues

Selected Option not displayed correctly if options and selection are passed

Selection is only displayed correct if a timeout is used

$scope.options = options;


$timeout(function () {
    $scope.selecttion = selection;
})

New improvement - group elements by

Hi there,

I would like to thank you for the awesome plugin.
Everything works great, but unfortunately I miss one thing which is group elements by.
I mean it should be similar like this :

<ul ng-repeat="(key, value) in options | orderBy: 'group' | groupBy:group"> <li>{{key}} <ul> <li ng-repeat="option in value | orderBy: 'group2'"> {{option.label}} </li> </ul> </li> </ul>

It is possible/Are you going to implement group functionality to this plugin or I should build this by myself ?

Best regards,

Unable to setup Demo Hierarchy Examples

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [* ] question about how to use this project

• Summary
  Thanks for the work. I was able to get the regular multi-select to work, but am having difficulty setting by the demo hierarchy feature. Could you share a plunker/jsFiddle of a simple use case please?

Thanks.

Support for Angular 2+

• I'm submitting a ...
  [ ] bug report
  [X] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Please provide support for angular 2, 4 etc

Checkboxes and single selection

When w11k-select is in the single selection mode (config = {multiple: false}) then are the checkboxes still within the select. These are unnecessary. Instead of use styling to hide the checkboxes, they should not been created at all.

Show button to clear selection always

The button to clear the selected item(s) is only shown, when the option required is set to false. When it is set to true, then the clear button disappears.

This behavior should be configurable.

Generate API Documentation

Project should ship with an API documentation describing the attributes of the directive.

Unknown provider gulp

There seems to be a minification mishaps when using gulp-uglify. Unknown provider error is thrown by angular.

filtered list not reset after cleared with x-button

If you filter the list, and then clear the filter with the x-button, the filtered list is not reset and shows the same values as before the filter was cleared.
I only tested it on the demo page.

Rename InfiniteScroll Directive to avoid conflicts with other directives

The internal infiniteScroll Directive should be prefixed with "w11k-select-" or similar to avoid conflicts with e.g. https://github.com/sroze/ngInfiniteScroll

Filter not working in Hierarchy

• I'm submitting a ...
  [* ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  The filter does not seem to work for demo hierarchy. Basically you can search/filter for the top level but not any sub-level like "GrandChild1a". Could you please take a look?

Thanks.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

w11k-select-options with object as the selected model?

Hi,

While this works fine:

     w11k-select-options="book.value as book.label for book in widget.bookSet"
     ng-model="widget.selectedBooks"

I want to be able to reference the actual book object in my widget.selectedBooks model.

An issue I have found is that I have cases where my bookSet array has objects where the book.value is the same (i.e not unique) and this creates problem with option.hash - therefore not displaying the actual dropdown because of ng-repeat dupes.

So rather than have an array of strings in selectedBooks, I want to have an array of objects. This would solve the issue of the ng-repeat problem with the option.hash track by and also cases whereby I want to deal with the whole object in my model and not just the string value.

When I try that, I don't see anything in the dropdown. Do I need to change something?

Thanks,
Andreas

Accept hash function as an argument

I'm having problems with the hash function and complex models

var options = [
{id: 1, comments: [1, 2, 3]},
{id: 2, comments: [4, 5, 6]}
];

var selected = {id : 1, comments: [3, 2, 1]}

The problems here is the order of the comments array. The hash function thinks they are different values.

I think a good solution could be a new parameter to pass the hash function. In my case the hash function should compare only by id

The widget is not accessible using the keyboard

When stepping through form elements the w11k widget is skipped.

fix paths in demo

    <script type="text/javascript" src="../bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="../bower_components/w11k-dropdownToggle/dist/w11k-dropdownToggle.js"></script>
    <script type="text/javascript" src="../bower_components/angular-bindonce/bindonce.js"></script>
    <script type="text/javascript" src="../dist/w11k-select.js"></script>
    <script type="text/javascript" src="../dist/w11k-select.tpl.js"></script>
    <script type="text/javascript" src="demo.js"></script>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/w11k-select.css"/>
    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css"/>

Cleanup TypeScript Build

• tidy npm run scripts

Field gets marked as dirty without user interaction

w11k-select marks a form field as dirty right at the beginning.

ngModel is not updated when using filters in options

In the following example the scope variable selected.options will never be updated:

<div w11k-select
   w11k-select-options="option.id as option.name for option in options | orderBy:'name'"
   ng-model="selected.options">
</div> 

not binding initial model value

I'm passing a model with some IDs, but the dropdown don't initialize these values. Always starts with no selected items.

<div w11k-select ng-model="item.role_ids">
item.role_ids = [1,2,3]

How could I accomplish that?

I forked the plunker example and tried to apply a inital value: http://plnkr.co/edit/s1j20CAiOqlioeAWvo5y?p=preview
$scope.select.selection = [{ label: 1, value: 1 }, { label: 2, value: 2 }];
or
$scope.select.selection = [1,2];

Unable to Pre-select

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [*] question about how to use this project

• Summary

Hi,

We are unable to preselect in the demo hierarchy as well. Whenever we set the ids that we wish to select, it resets it as undefined. Here is the plunker you shared before.

https://plnkr.co/edit/RCVb5Cc6IBTyQeRXltWW

Could you please help again?
Appreciate the help.
Thanks.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Update Demo

• I'm submitting a ...
  [ ] bug report
  [x] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  Update demo to most recent version (new features)

Content is not shown sometimes

the widget sometimes does not render the list items

occurs especially in FF and IE.

Update to latest w11k-dropdownToggle

Hi
Can you please update in the bower dependency the version of w11k-dropdownToggle to the new one (0.2.0)?

Tnx!

No selections setting view model to undefined rather than null

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [x ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  It would appear that de-selecting all option choices ends up setting the external model binding to undefined rather than null. This seems innocuous on the face of it, but has caused us a problem that leads me to believe this should be changed.

In our project we evaluate objects sent back to our services for changes between the existing values in our database and new values sent back from the client. w11k-select sets properties to undefined when all options are unselected; when we send our object back to the server, Angular strips all undefined properties off before serializing the object out to JSON. Since our services don't see a newly "null" value for the property, since it wasn't sent, the change isn't recorded.

While I can certainly fix this for our project, this seems like it might be a common use case; in addition, properties in Javascript simply shouldn't be set to undefined... explicitly saying "the value has been unset" is more appropriately a use case for null. If that's so, then w11k-select should be modified to correctly set the NG Model to null when no options are selected.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Write Tests

Documentation

There's none :) Would you like help with that?

Can't use the keyboard to select an option

When filtering options, I can't seem to be able to select an option using the keyboard. Any way to fix that?

Unexpected disabled behavior

I have something like this:

div 
   w11k-select
   w11k-select-options="ch.channelName for ch in scope.channels"
   w11k-select-config="{ disabled: scope.channels.length === 1 }"
   ng-model="scope.mutlChSelected"
   ng-change="scope.channelsSelected()" >
/div

I print the model var in the only place I change it and I see that it indeed changes.
Then I print it again in the channelsSelected() and it is empty [ ]

The w11k-select box gets disabled but it seems to change my model too.

Strange thing is that if I change the condition to something like 1 === 1 it will be fine.

Cheers!

Integrate Continuous Build (Travis)

Default value for multiselect mode

Hi,

I've encountered a problem when I try to load a saved state to the selector. I use:

When scenarios are loaded and the selector is populated, I would like to select all the item by default (or load a persisted state back to the selector).

I try to use this code:

$scope.SelectedScenarios = $scope.scenarios

But when I set the selected scenarios this way, it gets cleared and nothing will be selected. I debugged the code and found out that the selected scenarios is set well and after that something clears out (watch gets called two time).

Do you have any idea what can cause this behavior?

Thanks,

Gabor

not binding initial model value

I'm passing a model with some IDs, but the dropdown don't initialize these values. Always starts with no selected items.

´item.role_ids = [1,2,3];´

How could I acomplish that?

Config option for maxHeight referenced incorrectly

I'm submitting a ...
[*] bug report
[ ] feature request
[ ] question about the decisions made in the repository
[ ] question about how to use this project

Line 187 appears to have a bug where the reference to scope.style.maxHeight should be scope.config.style.maxHeight.

w11k-select/src/w11k-select.directive.ts

Lines 186 to 188 in 9ae26a6

	if (angular.isDefined(scope.config.style.maxHeight)) {
	domDropDownContent.style.maxHeight = scope.style.maxHeight;
	}

This package doesn't work with requireJS.

Hi I'm using requireJS to load my dependencies. I had to ruffle through the code to find out the exact module names but even when I include w11k.dropdownToggle and w11k.select.template it still doesn't work. Can you supply a guide or modify the code ?

Unable to set ngModel with require-validation

Cannot set a default value for dropdown select if require-validation is enabled and the required attribute is place on the form element

In single selection mode multiple items can be selected

If you set { multiple: false } you can still select multiple values by hitting enter on the keyboard

Create Live-Demo

I would like to bind a function on the dropdown.onClose

It would be interesting to be able to pass a on-close fonction in the scope of the directive, which would be called inside scope.dropdown.onClose(), which is already implemented.

Generic css class names conflict

• I'm submitting a ...
  [*] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

Many of the css classes in the default template have a very generic name. They conflict with the app styling and sometimes the select is styled with the app's css. For example "header" could be "w11k-header" to prevent that problem.