Support for multi-selection

[dimirc]

WIP:

Based on work done at #78 by @komakino. I manually rebased and did some minor changes.

TODO:

• Add selectize template (maybe dropping support for this theme? Dropping support for 'selectize' theme? #175)
• Add bootstrap template
• Change transinject for uisTranscludeAppend from fix(transclude): compile transclude elements with correct scope #151
• Improve margins between buttons at bootstrap theme
• Write tests
• Remove items from drop down that are already selected
• Check formatter/parser (single property binding) to work correctly on "multiple" mode
• Check choices with groupby to work correctly on "multiple" mode
• Fix: multiple choices highlighted at same time
• Fix: dropdown doesn't appear when pressing key down (just the word "true")
• Fix: when pressing a key on the input, the whole selected array is erased
• Prevent already selected items to show when searching
• Refactor/Clean code
• Add demo
• Avoid $setViewValue third parameter as explained on this comment
• Fix: refresh function, every new search removes items selected earlier.

Demo plunker (I'll be updating it with each new commit)

[dimirc]

@komakino can you give more info on what your meant with these 2 other tasks that you had on the PR:

• A user provided compare function to determine if an initially selected item matches an item in ctrl.items. Currently uses angular.equals
• Remove Tab key events; they were illogical and prevented ui-select from functioning correctly in a form

[PowerKiKi]

On the plunker you submitted, there is a visual bug where elements are highlighted when they should not be. Do the following:

1. click in input (to give focus)
2. type "w"
3. click on the item "COLOR = Yellow" (to select it)
4. click in input (to re-give focus)
5. the item list will be shown with several highlighted items, but I believe none of them should be highlited at this point:

[dimirc]

@PowerKiKi yes, this first commit was basically just the rebase of the code at the other PR. I see several some bug that I'll start fixing with next commits.

[dimirc]

@PowerKiKi I just push new commit that solves this problem (plunker updated)

[PowerKiKi]

That was fast, thanks ! looking forward to seeing this merged :-)

[jgoux]

This is huge, thanks a lot for your hard work!

[dimirc]

I just pushed a tricky commit to be able to have the elements of the model (array), bind only to single property instead of whole object like #107.

To make it clearer, plunker demo is showing different examples now.

[brafkind]

Merge please!

[dimirc]

Plunker for Bootstrap theme

[just-boris]

Hello all.
I don't think that this feature is a good idea. I already use another component for multiple selects  — ngTagsInput and it looks good for me.
My opinion is that multiple select claims another API (you need to return array as model value) and have different use cases than select, so the source code becomes very difficult to maintain and more hostile for new features.
So I appreciate two similar libraries and both of that can do own work well.

[brafkind]

just-boris, ngTagsInput is great, but it only shows options once you start typing. However, it doesn't allow the user to click into the field and immediately see a drop-down of choices, like we'd get with this enhancement, so I believe it's still necessary.

Once this is merged, how is one expected to configure the component to get multiple selection? Is there an example?

[dimirc]

@just-boris keep in mind that even the native <select> element also handles multiple so I think this feature is something we should also address, I feel that it's logical to have one library for single/multiple selections. We added it to our roadmap long time ago, keeping in mind that we want to be able to solve the common "selectable" needs that a regular app could have.

I just did a quick check to ngTagsInput and I see some differences, for example:

• We'll be able to bind to a single property of the objects instead of the whole object, not sure if the other directive lets you do that.
• In their examples I'm checking that I can't navigate through the tags with the arrow left/right to select a particular item and possible to erase it, we can do it.
• I see that they have a display-property attribute to specify a property to use when displaying tags but and we have the <match> element that give us much more freedom to display

@brafkind you only need to add multipleattribute and this will work and return an array to the ng-model instead of a single value.

  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple">
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
    <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
        email: {{person.email}}
        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
      </small>
    </ui-select-choices>
  </ui-select>

[just-boris]

input value comes from user, we should check that it is array before use it

[dimirc]

@just-boris solved on this commit 22f67aa

[just-boris]

@dimirc you reasons seem convincing.
I've added multiple select with groups in suggest into the plunker. I don't see any conflicts there

[keepitsimple]

Thank you! It's a very important feature.

1. Remove already selected items while searching must be an optional parameter, e.g. I want to select several addresses.

2. selectedItems arrya can be empty. The "!selectedItems" check is not enough.

    //Remove already selected items 
    $scope.$watchCollection('$select.selected', function(selectedItems){
      if (!selectedItems || selectedItems.length == 0) return; 

[keepitsimple]

Could you please point me at the place in the code where the refresh function in the multi ui-select removes items in the selected list?

[dimirc]

1. Remove already selected items while searching must be an optional parameter, e.g. I want to select several addresses.

@keepitsimple What you mean that you want to select several addresses? The same address many times? Can you give a better example of the use case were this could be optional?

[dimirc]

If anyone wants to help, writing test for this PR will help a lot

[dimirc]

Shouldn't be necessary since we are already filtering selected

[dimirc]

@keepitsimple I just pushed a commit that should correct the problem you had

[dimirc]

I created #176 to check how to fix the use of 3rd parameter on $setViewValue as explained in previous comment. For now this option will let this PR to work correctly with versions up to v1.3.0-rc.0