List box with no selection

[Stephen Schaub]

I have a <select> element that uses the size attribute to create a list box. I'm using the ng-options attribute to populate the list box. Initially, when no item is selected in the list box, there is an empty items that appears at the top of the list. When an item in the list is selected, the empty item disappears.

Is there a way to eliminate this empty item so that it does not appear in the list initially?

Thanks for any tips.

Stephen

[Sander Elias]

Hi Stephen,

What is it that you want to be displayed when nothing is selected? Put that in the ng-Model and you are done.

Regards

Sander

[Stephen Schaub]

Sander,

Thanks for your reply.

Let's say the list has the following items: Red | Blue | Green

When nothing is selected, then none of the items should be highlighted.

What should I put in the ng-Model in this case? If I set it to null or make it blank, then Angular inserts an empty item at the top of the list, which is not what is desired.

Stephen

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/lpShs0sItM8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Stephen,

The option list shows the current value. If the current value is not in the list it will be put in there. 

So, whatever you will put in the ng-model will be shown. this how a select works. There is nothing

Angular on this. It is how HTML forms work. 

If it is critical to your UX, you should not use a select, but something else (a button-bar comes to mind!)

Or put an default value in ngModel (for example the text: Select an color)

Regards

Sander

[Stephen Schaub]

Hi, Sander,

In an HTML select that is rendered as a dropdown, you are correct. Some item must be selected in the dropdown.

However, in an HTML select that is rendered as a list (size > 1), it is possible in pure HTML for no item to be selected. That is the scenario I am discussing.

Example:

<select size="3"><option>Item 1<option>Item 2<option>Item 3</select>

Stephen

[Sander Elias]

Hi Stephen,

I'm not sure what it is you want to achieve, can you build a plunker demonstrating what you have, and using plain HTML of what you would like to see?

Fairly sure I can fix this, as soon as I understand what it is you are after ;)

Regards

Sander

[Stephen Schaub]

Thanks for offering to take a look, Sander. Here's an example of what I am trying to achieve:

http://plnkr.co/edit/Vt9m5FTLlKKaH9c7Zj4C

A list box with nothing selected initially.

Stephen

[Sander Elias]

Hi Stephen,

You are right, that is a bit annoying ;)

here is your solution: http://plnkr.co/edit/kCCERt4iqd7pKYcpiot5?p=preview

Regards

Sander

[Stephen Schaub]

Thanks very much, Sander! This is very helpful, and I really appreciate your taking the time to show me this solution.

I have also discovered that adding the "multiple" attribute to the <select> element will achieve this behavior, in situations where multiple selection is appropriate.

Stephen

[Antoine Polatouche]

Hi Sander,

on a ubuntu 12.10 box, your example works fine, however with firefox
(28.0) the result variable is not changed when I'm clicking an item.

Any clue?

[jerry kurata]

FWIW, if the list is set to multiple I use an array of the desired selected values and set that array as the ng-model.  That lets you set the default to multiple selected items in the list and get the multiple items the user has selected

<select style="width: 100%;" size="6" ng-model="currentItems" multiple
                                    ng-multiple="true"
                                    ng-options="item.Description for item in availableItems"
                                    ng-change="updateItemDependentControls()"></select>

In the initialization with the 1st and 3rd item selected I do something like :

    service.getItems(key)
               .then(function (result) {
                   $scope.Items = result.data.d;
                   if ($scope.Items && $scope.Items .length > 0) {
                       $scope.currentItems= [];
                       $scope.currentItems.push($scope.availableItems[0]);  // add 1st item 
                       $scope.currentItems.push($scope.availableItems[2]);  // add 3rd item