AngularJS not binding to numeric value in select list

Question

I have an existing select tag with existing option tags, one marked "selected", for example:

<div class="form-group">
  <label class="control-label">Test</label>
  <select ng-model="vm.testNumber">
    <option>Choose...</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3" selected>three</option>
  </select>
  <p class="help-block">{{vm.testNumber}}</p>
</div>

Angular is binding to the model correctly and spits out "3" in the help block when the page loads, but option 3 is not selected. It binds and shows 3 as selected if I use text for the value attributes on each option, but not when it's a numerical value. Instead it inserts an option at the top of the select list:

<option value="? number:3 ?"></option>

What am I doing wrong?

codeninja.sj · Accepted Answer · 2016-03-07 14:20:05Z

2

From Angular DOC

Note that the value of a select directive used without ngOptions is always a string. When the model needs to be bound to a non-string value, you must either explicitly convert it or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present.

If you change your code as like as below code snippet, you don't need to do any explicit string conversions.

 <select ng-model="vm.testNumber" ng-options="item.value as item.label for item in [{label: 'one', value: 1}, {label: 'two', value: 2}]">
    <option value="">Choose...</option>
  </select>

edited Mar 7, 2016 at 14:20

answered Mar 7, 2016 at 3:23

codeninja.sj

4,1891 gold badge23 silver badges40 bronze badges

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

3 Comments

MikeT Over a year ago

Sorry, was a bit late last night, didn't catch that this example was replacing 'one' with 1, 'two' with 2 in the option text

codeninja.sj Over a year ago

@MichaelTranchida, updated the solution, hope it helps

MikeT Over a year ago

Ok, that works as I'd expect. Thank you. Think I'll stick with the directive in my answer, that way I don't have to worry (as much) about magic strings in my code.

MikeT · Accepted Answer · 2016-03-07 13:00:40Z

1

Turns out you need to add a directive to make this work correctly. @codeninja.sj's answer ends up replacing 'one' with 1, 'two' with 2, etc. In the documention, the last example has this directive, convert-to-number

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

None of the other examples in the documentation worked for me.

Update @codeninja.sj's updated answer does work, however, figure this directive will cut down on magic strings in my code.

edited Mar 7, 2016 at 13:00

answered Mar 7, 2016 at 12:33

MikeT

2,6021 gold badge30 silver badges40 bronze badges

Collectives™ on Stack Overflow

AngularJS not binding to numeric value in select list

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related