Updating angular select options

[Sami Pietilä]

Hi,

Please take a look at a simple angular test page: http://ariana.dy.fi/files/angular.html

The select options are coming from the input field. If ",e" is erased from the input, two empty items appear to the selection options.

How to write the code in such a way that empty values do not appear to the selection options?

Thanks

[Vaibhav Gupta]

Empty option is appearing because angular doesn't recognize the select's ng-model in options list. Since 'e' is removed from options, angular creates a dummy item in options list. This can be verified by inspecting the select menu in developer tools. You will observe '?' in the empty option's value. You will have to update the ng-model of select to a value that exists in the options. For eg:

 if (csep_string.indexOf($scope.sel_val) === -1) {

      $scope.sel_val = csep_string[0];

    }

Please refer to the following code in plnkr:

http://plnkr.co/edit/Fcmt18cThHeEIFNsUVJQ

However, your code might not be a production grade code as on each digest cycle, "csep_to_list" function will be called. You might want to change the itemList on input's update.

[Sami Pietilä]

Hi,

Thank you for taking time to help with this problem!

Unfortunately, it seems the "empty option" problem also occurs the code link version (http://ariana.dy.fi/files/angular-select.png).

[Vaibhav Gupta]

Hi,

That looks a bit strange to me. This is the typical “works for me” problem. :) However, the fundamental point remains that select’s model needs to be updated to avoid empty select.

-- 
Regards,

Vaibhav Gupta

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

[Sami Pietilä]

Hi,

It takes a while of typing with your version, but eventually the problem occurs.

What I think happens is if it occurs (for some reason) that the selected value and options do not match, angular adds multiple empty values to its internal option list and can't ever recover from the situation even if user given selected value and options become ok.

A bug in angular?

Thanks

[Vaibhav Gupta]

Hi,

Can you help in out in reproducing the empty options scenario? Angular's approach of introducing empty option looks correct to me as it helps in debugging the code.

[Sami Pietilä]

Hi,

I think using more than one letter items (for example "hello, world") introduces empty items for the original plnkr code.

I replaced string operations with list operations:

if (itemList.indexOf($scope.sel_val) === -1) {

      $scope.sel_val = itemList[0];

}

This seems to work somewhat better, but still I manage to get empty items:

http://ariana.dy.fi/files/angular.png

For example (with the above code using list operations):

0) string is showing "a,b,c,e"

1) prepend ",,". The list is showing ",,a,b,c,e" 

2) use option box to select the second empty value from the option list

3) remove ",," prefix

4) use option box to select a

Now there is still empty "" at the beginning of the option list.

5) append ",g"

Still the empty "" persists.