Angular.js: ng-select with (integer)ng-model and (object)ng-options

[tipuban]

In JavaScript you cannot have an object with integers as keys (they will always be typecast to String).

If you have a ng-select with ng-model as Integer and ng-options as Object, you'll never get the select to have a default value since Angular seems to use a STRICT comparison between the ng-option's values and the ng-model value.

Example (see in Plunker):

$scope.myOptions = {
    "1": "Value 1",
    "2": "Value 2",
    "3": "Value 3"
};
$scope.myModel = 2; // note it's an Integer
// replacing this with "2" will fix the issue

Then you'd have your html:

<select ng-model="myModel" ng-options="key as value for (key, value) in myOptions"></select>

That being said, ng-select should _always_ typecast the ng-model value as String when it's dealing with Object Data Sources (since those objects can't have integers as keys), or simply use non-strict comparison between the two.

[cheshir]

Same issue. It would be useful to use non-strict comparison. Even affect behavior through options.

[Narretz]

Oh my ... looks like this was unintentionally fixed in 1.3.0-rc.5, and then I broke it again in https://github.com/angular/angular.js/commit/9e305948e4965fb86b0c79985dc6e8c59a9c66af, because it caused other problems.

[petebacondarwin]

Thing is that keys really are strings. So if you are going to match against a key then you must match a string. Even if we did use non-strict comparison to match numbers to strings, as soon as you click on an option the model is going to change to a string, since we have no way of knowing that you really wanted it to be a number.

[tipuban]

@petebacondarwin, IMHO changing it to a string upon clicking the option is still better than breaking the entire _selected_ functionality. Thanks anyway. Cheers!

[petebacondarwin]

Here is a better solution: http://plnkr.co/edit/7Vw21K?p=preview

[tipuban]

I agree there are workarounds, but sometimes sanitizing nested objects isn't as practical when you're dealing with KBs of data that are coming from a webservice somewhere, especially considering you have to do it twice (on display and on POST). Anyway, it's just a suggestion, not necessarily a blocker. Thanks for your input!

[petebacondarwin]

Here is a much better solution that really does work: http://plnkr.co/edit/VT8KTS?p=preview

[ccrabb]

<select ng-options="key*1 as value for (key,value) in values"> works as well.

[treii28]

I was running into the problem when using angular with a form generated in zend and a custom object property (integer) in the ng-model binding. While petebacondarwin's first solution would probably address it, I found it was easier just to force the property to a string before angular rendered the select. e.g.
$scope.list.ListtypeId = '' + $scope.list.ListtypeId;

[zjhiphop]

@Narretz This issue is so tricky, can you give a solution to easily switch mode bwtween nonstrict and strict mode?

[carlosrincon17]

@ccrabb +1