Angular adds strange options into select element when setting model value

Question

I have a select element defined as such:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

All works fine when I'm not setting any kind of value in the directive which contains this select element. But when I do something like newAddressForm.country_id = 98, instead of selecting the option with value 98, Angular injects a new one at the top of the select element, like so:

<option value="? string:98 ?"></option>

What gives? What sort of format is this and why does this happen? Note that if I do a console.log(newAddressForm.country_id) in the directive, I get a normal "98", it's just weird in the generated HTML.

Edit: Situation update. Switched to using ng-select, but the issue persists.

The weird element no longer appears, BUT, now there's another element at the top, one that has only a question mark ? as the value, and no label.

That's, from what I gathered, Angular's "none selected" option. I still don't understand why it won't select the option I tell it to select, though.

Doing newAddressForm.country_id = 98 still gives no results. Why is that?

Anstus

Were you able to find out the issue? – Readjustment

I gave up on Angular and have been living a happy life ever since – Anstus

Answer 1

Angular does not set the value of a select element to the actual values of your array and does some internal things to manage the scope binding. See Mark Rajcok's first comment at this link:

https://docs.angularjs.org/api/ng/directive/select#overview

When the the user selects one of the options, Angular uses the index (or key) to lookup the value in array (or object) -- that looked-up value is what the model is set to. (So, the model is not set to the value you see in the HTML! This causes a lot of confusion.)

I'm not entirely sure using an ng-repeat is the best option.

Griffiths

This is different from, say, a radio group right? And if so, I wonder WHY the difference. – Mutual

In general when using angular you shouldn't be concerning yourself with the values of html elements. It is the scope data that contains the appropriate values that you'd be manipulating/using. – Griffiths

You really should be using ng-select as pointed out by @lucuma. – Convalesce

Turns out ng-select works even if the values don't match the real values at all, but are just array indexes. However, it still won't auto-select an option element if I do newAddressForm.country_id = 98. It still inserts its own weird element onto the top of the options stack, only now it's just a single question mark as the value, and no label. Why won't it select the option I set? – Anstus

Answer 2

Using the following syntax with ng-options solved this problem for me:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>

Dail

I have the same issue with the question above. I tried using the ng-options as suggested. And I notice that the option values are the index of the array, not the object field value. I have this code ng-options="client.id as client.value for client in clients". and also got the option with the ? value. – Endothelioma

Indeed, best answer. – Indira

Answer 3

If your values are integers you should use "" even if they're not strings, that simple reason is exactly why you're getting an option with a question mark as a value.

You shouldn't be using this:

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

This is the right way:

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

If you've at least one record which isn't using "" you'll be getting this ? option value.

Bolo

Answer 4

I was running into this same problem earlier this evening, where I saw a select option showing up as the first in my list even though I didn't explicitly create it. I was filling a list of select options in my controller and using the same ng-options syntax mentioned above by jessedvrs (except that I was also inserting the "select an option" default option in the controller rather than marking it in the HTML like he was).

For some reason the select list would always show an additional option at index zero with a value of "?", but when I changed how I filled my default option in the controller, this issue went away. I was populating the select options by making an API call, filling them inside of a promise. I made the mistake of also populating my default "select an option" option as the first thing I did in that promise, but when I did this instead outside of the promise (prior to making the API call), the select options populated the way I waned them to.

I think jessedvrs option is one solution to the problem (setting the default option in the HTML markup), but if you prefer to populate your options in javascript instead, I would suggest to still set the default option prior to making any calls to an API or processes that may still be running while the HTML is being rendered.

Lyophilic

Answer 5

When you assign a value to some select element, AngularJS looks for the provided value in the value attribute of the option tags in that select element. But the catch is, AngularJS does a type based comparison. So if the values in the option tags are strings (which usually is the case) and the variable you bind using ng-model is a number, AngularJS fails to find the matching option element and hence, creates its own element like this -

<option value="? integer:10 ?"></option>

The solution is, while binding itself, convert it to the appropriate type.

In this case, the solution would be to bind an Integer

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

If the values are set as Strings, the trick would be to use

<select ... ng-model="newAddressForm.country_id.toString()" >

Smithsonite

Answer 6

use " track by 'value' " at the end of your ng-options :D

like the example below:

ng-options="country.id as country.name for country in countries track by country.id"

Amphioxus

Answer 7

While pushing data on scope variable we can use following code

$scope.enquiryLocationRow.push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

it resolved my issue

Luxembourg

Answer 8

vm.kanoonCourses is object array, vm.courses is string array :

<table class="table table-hover">
    <tr style="font-weight: bold; background-color: #dfedf8;">
        <td>index</td>
        <td>course in our system</td>
        <td>course in outside system</td>
    </tr>
    <tr ng-repeat="course in vm.courses">
        <td style="vertical-align: middle;">{{$index+1|persianNumber}}</td>
        <td style="vertical-align: middle;">{{course.CourseTitle}}</td>
        <td>
            <select  
                ng-model="course.KanoonCourseTitle"
                ng-options="option as option for option in vm.kanoonCourses">
            </select>
        </td>
    </tr>
</table>

Townsley