Provide option to add no-value choice

[just-boris]

Angular.js select directive have a convenient way to define null-value option. If you put <option> tag without value inside <select>, it will be treated as null-option which sets model value to null.
It is useful sometimes to provide user ability to reset selected value. Now I have to implicitly add that item to other choices in repeat.

$scope.persons = [{"id": null, "name": "No person"}].concat(otherPersons)

<ui-select ng-model="form.person">
    <ui-select-match placeholder="Select person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

I don't want to do it and it would be good if you will have an option for provide this option through html, for example

<ui-select ng-model="form.person">
    <ui-select-match placeholder="Select person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-null-choice>No person</ui-select-null-choice>
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

It is similar to select directive logic and looks good for me. What do you think?

[erobwen]

I agree, and in addition I would also like an "x" button, even when in single select mode to reset the ui-select to this "empty choice". Is there currently any way to have the "x" button in single select mode?

[just-boris]

@erobwen you can put clear button inside <ui-select-match />

[erobwen]

just-boris: Is there an example of how to do it?

[amcdnl]

Why not just use clear? #287

[just-boris]

@amcdnl it could be helpful, but it is not quite suitable for me.
My use-case of ui-select is a filter of persons. So, user can select some person or select option "Any person" that's means null
It couldn't be solved by the clear button, because user would see a placeholder "Select person..." instead of actual meaning "Any person"

Here is a plunkr of that what I want to get

[erobwen]

amcdnl: I try to use it with the bootstrap theme (downloaded latest ui-select with bower). Maybe there is something wrong with my setup, or is it not compatible with the bootstrap theme? But I get no result from using "allow-clear", no clear button appears?

Another wierd thing is that "propsFilter" from your plunker does not work on my version, I have to type "filter" and only filter on one single property for it to show any items in the dropdown.

[jstoneky]

@erobwen - Just to clarify, in their plunker they have implemented the propsFilter in their controller. So if you didn't also implement it, then you wouldn't be able to use it. 'filter' is a default filter provided by ng.

[lifehackett]

Does it need to be another directive? Personally, I'd like to move away from so many directives and attributes and more towards a configuration object that could be passed in. This would make it more dynamic.

[just-boris]

@ken4z where you will store that configuration object?
When you are using a directive, you can configure your controls just in markup and you can see configuration right in that place where it will be used.
So I vote for the declarative way through directives

[lifehackett]

There would still be a directive, but the null value display name could just be passed in.
<ui-select-choices null-label="No person"></ui-select-choices>

Instead of making it an additional attribute though, I'd rather have something like

<ui-select ng-model="form.person" options="options">
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

where options is something like

options = {
  multiple: false,
  placeholder: 'Select person...',
  nullLabel: 'No person',
  searchEnabled: false,
  selectedDisplayProperty: 'name'
}

We have a lot of selects that are fairly similar so I'd like to have a wrapper for ui-select that encompasses this commonality with data to change the behavior, changing the properties of an object is easier than adding/removing/manipulating html. But perhaps there is a way you achieve this that I am not aware of.

[FFelling]

+1 For this feature (in combination with bootstrap theme).

[shlensky]

+1

[antonchaika]

+1

[ErikSvedin]

+1

[kjim]

+1