Angularjs ng-options using number for model does not select initial value

Question

I'm trying to use ng-options with a <select> to bind a numeric integer value to a list of corresponding options. In my controller, I have something like this:

myApp.controller('MyCtrl', function() {
    var self = this;

    var unitOptionsFromServer = {
        2: "mA",
        3: "A",
        4: "mV",
        5: "V",
        6: "W",
        7: "kW"
    };

    self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: key, text: unitOptionsFromServer[key] };
    });

    self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});

HTML:

<div ng-controller="MyCtrl as ctrl">
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
    <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>

And here's a jsFiddle demonstrating the problem, and some other approaches I've taken but am not happy with.

The select option is being initialized with an empty value, instead of "mV" as expected in this example. The binding seems to work fine if you select a different option -- selectedUnitOrdinal updates properly.

I've noticed that if you set the initial model value to a string instead of a number, then the initial selection works (see #3 in the fiddle).

I really would like ng-options to play nice with numeric option values. How can I achieve this elegantly?

Christophe L · Accepted Answer · 2016-08-25 22:01:14Z

108

Angular's documentation for the ng-select directive explains how to solve this problem. See https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (last section).

You can create a convert-to-number directive and apply it to your select tag:

JS:

module.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return val != null ? parseInt(val, 10) : null;
      });
      ngModel.$formatters.push(function(val) {
        return val != null ? '' + val : null;
      });
    }
  };
});

HTML:

<select ng-model="model.id" convert-to-number>
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Note: I found the directive from the doc does not handle nulls so I had to tweak it a little.

edited Aug 25, 2016 at 22:01

answered Dec 6, 2015 at 5:01

Christophe L

14.1k6 gold badges36 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kenberkeley Over a year ago

most of time would be convert-to-string, just change parseInt to String

f.ardelian Over a year ago

This should be the accepted answer because it's more general and doesn't depend on ng-options. Also, please keep in mind that this is not for any number but only for integers. If you want floats to work, use parseFloat() but if you're comparing floats for equality you're probably doing something very very wrong.

user1776573 Over a year ago

Nice solution. But when you have 0 in your select options,it gives null because of the implementation. slight tweak is needed to handle this case.

Maarten Kieft Over a year ago

Nice! I was looking for a way to convert the string values from the form to my strong typed object (with date, numbers, boolean etc). This approach looks nice!

Terrabythia Over a year ago

Awesome, but this didn't work for me when the value was 0 because 0 == false. Rewrote it to: return (val||0===val) ? parseInt(val, 10) : null; and return (val||0===val) ? '' + val : null;

|

re-gor · Accepted Answer · 2015-12-29 05:57:24Z

46

Maybe it's a bit messy, but result can be achieved without special functions right in ng-options

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

answered Dec 29, 2015 at 5:57

re-gor

1,35113 silver badges20 bronze badges

7 Comments

cnlevy Over a year ago

It's really the simplest answer. The angularJS library version 1.3.10 used in the jsFiddle had a bug and +unit.id notation didn't work, but it does from 1.4.0; see the working jsFiddle

YETI Over a year ago

but the value of option is: value="number:0",with 'number'

Ben Barreth Over a year ago

messy? This is gorgeous! Far cleaner and simpler than injecting a custom directive. Thank you!

istrupin Over a year ago

This is really the right way to go here and helped me out a lot. Can you explain the significance of the "+" in the ng-options?

re-gor Over a year ago

@istrupin this is just type conversion. More on MDN: Unary plus operator

|

Mathew Berg · Accepted Answer · 2015-01-23 17:18:52Z

17

It's because when you get the unit.id it's returning a string not an integer. Objects in javascript store their keys as strings. So the only way to do it is your approach of surrounding 4 by quotations.

Edit

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="convertToInt(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

$scope.convertToInt = function(id){
    return parseInt(id, 10);
};

edited Jan 23, 2015 at 17:18

answered Jan 23, 2015 at 17:04

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

5 Comments

BrandonLWhite Over a year ago

Thanks. I get a numeric value from the server, and I need to send a numeric value back. There is a lot of this. I really want to avoid writing conversion code in the controller. (It seems like I never had this snag in Knockout). What's a smart/lazy way I can get what I want?

Mathew Berg Over a year ago

Angular is more restrictive then knockout in this aspect i guess :). Anyways I've edited the question to show you one option you can do.

BrandonLWhite Over a year ago

Ok, I can almost live with that.

BrandonLWhite Over a year ago

AHA! I've chewed on this a little more and thanks to your answer and some insight from a coworker, I can get what I want by instead doing { id: parseInt(key), text: self.unitOptionsFromServer[key] } when building up the options array and everything works as expected then with ng-options. The part that was tripping me up is even though you can express object keys as numeric values, JS changes those to strings.

Mathew Berg Over a year ago

Totally my bad, should of noticed that you were converting it, I just quickly looked at the dom. Glad you figured it out! Side note i'd put parseInt(key, 10);

zooblin · Accepted Answer · 2015-10-04 14:08:40Z

9

You can also define filter number, this filter will automatically parse string value to int:

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id|number as unit.text for unit in ctrl.unitsOptions"></select>


angular.module('filters').filter('number', [function() {
        return function(input) {
            return parseInt(input, 10);
        };
    }]);

edited Oct 4, 2015 at 14:08

answered Jul 26, 2015 at 8:22

zooblin

2,5082 gold badges31 silver badges36 bronze badges

1 Comment

doug65536 Over a year ago

You should always use a radix when you use parseInt, like this: return parseInt(input, 10);

s3r3k · Accepted Answer · 2015-12-11 11:49:19Z

9

Just to add Christophe's answear: easiest way to achive and maintaint it is to make a directive:

JS:

.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        //saves integer to model null as null
        return val == null ? null : parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        //return string for formatter and null as null
        return val == null ? null : '' + val ;
      });
    }
  };
});

Christophe's answear wont work correctly for '0' as it returns false on "val?" test.

edited Dec 11, 2015 at 11:49

answered Dec 11, 2015 at 9:40

s3r3k

911 silver badge4 bronze badges

Comments

Vid Stoschitzky · Accepted Answer · 2019-11-26 09:07:25Z

9

You can use ng-value attribute. Like this:

<select ng-model="model.id">
  <option ng-value="0">Zero</option>
  <option ng-value="1">One</option>
  <option ng-value="2">Two</option>
</select>

answered Nov 26, 2019 at 9:07

Vid Stoschitzky

991 silver badge1 bronze badge

1 Comment

young-ceo Over a year ago

This is the simplest / easiest solution

Ted Scheckler · Accepted Answer · 2018-10-11 15:29:15Z

7

I think the other solutions are overly complex for simply establishing the value as an integer. I would use:

<select ng-model="model.id">
    <option ng-value="{{ 0 }}">Zero</option>
    <option ng-value="{{ 1 }}">One</option>
    <option ng-value="{{ 2 }}">Two</option>
</select>

answered Oct 11, 2018 at 15:29

Ted Scheckler

1,5315 gold badges19 silver badges41 bronze badges

Comments

tymeJV · Accepted Answer · 2015-01-23 17:04:35Z

3

Angular is seeing your id property as a string, add quotes:

self.selectedUnitOrdinal = "4";

answered Jan 23, 2015 at 17:04

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

emil.c · Accepted Answer · 2016-08-04 08:13:06Z

3

Very similarly to tymeJV's answer, simple workaround is to convert the default selection number to a string like this:

self.selectedUnitOrdinal = valueThatCameFromServer.toString();

This way, you don't have to hardcode the number, you can just convert any received value. It's an easy fix without any filters or directives.

answered Aug 4, 2016 at 8:13

emil.c

2,0282 gold badges28 silver badges50 bronze badges

Comments

mangesh · Accepted Answer · 2017-12-27 13:36:41Z

2

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

answered Dec 27, 2017 at 13:36

mangesh

3654 silver badges13 bronze badges

2 Comments

Rahul Gupta Over a year ago

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion

HerTesla Over a year ago

This is what fixed my error - thanks for this. I would suggest that the + turns this value into a String.

oadcub · Accepted Answer · 2019-05-15 05:39:56Z

1

Make id property in unitsOptions as number

self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: +key, text: unitOptionsFromServer[key] };
    });

http://jsfiddle.net/htwc10nx/

answered May 15, 2019 at 5:39

oadcub

112 bronze badges

Comments

bwitkowicz · Accepted Answer · 2015-12-10 14:56:48Z

0

While the solution provided by Mathew Berg works it will probably break other selects that use sting-valued select options. This may be a problem if you try to write one universal directive for handling selects (like I did).

A nice workaround is to check if the value is a number (even if it is a string containing a number) and only than do the conversion, like so:

angular.module('<module name>').filter('intToString', [function() {
        return function(key) {
            return (!isNaN(key)) ? parseInt(key) : key;
        };
    }]);

or as a controller method:

$scope.intToString = function(key) {
    return (!isNaN(key)) ? parseInt(key) : key;
};

answered Dec 10, 2015 at 14:56

bwitkowicz

7546 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angularjs ng-options using number for model does not select initial value

12 Answers 12

7 Comments

7 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

7 Comments

7 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related