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

by

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.

More Related Contents:

  1. ng-change get new value and original value
  2. Angularjs: ng-options group by
  3. ng-options with disabled rows
  4. ng-options with simple array init
  5. Use filter on ng-options to change the value displayed
  6. How to set the value attribute for select options?
  7. How to cancel an $http request in AngularJS?
  8. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  9. How to access cookies in AngularJS?
  10. AngularJS – How to structure a custom filter with ng-repeat to return items conditionally
  11. Can I use ng-model with isolated scope?
  12. AngularJS : Where to use promises?
  13. AngularAMD + ui-router + dynamic controller name?
  14. how to inject dependency into module.config(configFn) in angular
  15. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  16. Sharing data between directives
  17. Using ng-app without a value
  18. Angular $http vs service vs ngResource
  19. When to use the AngularJS `$onInit` Life-Cycle Hook
  20. AngularJS: ngRoute Not Working
  21. ERROR in Cannot find module ‘node-sass’
  22. “Uncaught Error: [$injector:unpr]” with angular after deployment
  23. Rendering Highcharts using Angular js Directives
  24. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  25. Call Angular Function with Jquery
  26. AngularJS – why is $apply required to properly resolve a $q promise?
  27. WebAPI CORS with Windows Authentication – allow Anonymous OPTIONS request
  28. How to use the axios library with AngularJS
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment