Initial ng-model value not set in select

Question

I have an enum (I code using TypeScript):

export enum AddressType
{
    NotSet = 0,

    Home = 1,
    Work = 2,
    Headquarters = 3,

    Custom = -1,
}

Then in my controller I have a field named type, into which I set the initial value that should be selected in the select input (I set it to AddressType.Headquarters).

Finally, in my HTML I put the following:

<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>

Everything seems to work fine except one thing: for some reason Angular does not select "3" (Headquarters) initially in the select after all bindings have been updated. Angular creates an extra option like this instead:

<option value="?" selected="selected"></option>

So for some reason Angular cannot figure the initial option to select in the combo.

If the user selects another option of the combo box, Ctrl.type is updated properly so the binding works fine for that part. Basically my problem is just that the option that should be selected initially is not selected as expected.

What am I missing here that is causing that problem?

Solution 1

Found the problem:

The array returned by Ctrl.getAddressTypes() was an array of strings:

["0", "1", "2", "3", "1"]

and what was stored in Ctrl.type was of type number.

AngularJS compares the array supplied to ng-options to the value supplied to ng-model using the '===' operator. 3 does not equal to "3" in that case - that's why it did not work.

Solution 2

I often run into this when using number id's. My way around this quirk is to add ''+ to convert it to string type:

<select ng-options="''+u.id as u.name for u in users"

Solution 3

In a function if the below code is added and the same is called from the ng-init then the issue is also getting resolved. This will resolve the string comparison issue.

$scope.Ctrl.type = "" + $scope.Ctrl.type + "";

Comments

[sboisse]

I am not sure why I need to set ng-init on it. The problem seems to be elsewhere because I just made a very lean fiddle that shows it is supposed to work without ng-init: jsfiddle.net/9v83G

[Maxim Shoustin]

@sboisse now try to remove this.selectedType = 3;. You can init from HTML by using ng-init or add start value to model like you did: this.selectedType = 3;

[sboisse]

I traced in angularjs code, and the problem seems that it compares numbers against strings using ===, so 3 === "3" does not match. I still have to investigate because the jsfiddle that I made does not reproduce that behavior.

[sboisse]

Yep, that's the problem. In my code my array of available types enumerated by ng-options were strings, and the value set in ng-model was a number, so it did not match.

[Nuno Rodrigues]

Just saved me time! Thankx

[vargen_]

this worked for me, but it can be simpler like: $scope.Ctrl.type += "";