Default option in select

Question

I have this very simple select element:

<label>Items per page</label>
    <select class="form-control input-sm w25" ng-model="itemsPerPage">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
    </select>

with controller:

 $scope.itemsPerPage = 5; // default value

But the default value is a blank option and the default value attempt doesn't do anything.

How do I make the value 5 the default?

Creates a question, doesnt accept answer, deletes account :( — tymeJV, Jun 28 '18 at 16:29

score 2 · Answer 1 · answered Jun 28 '18 at 16:13

2

Angular is probably converting that value to a string, so do:

$scope.itemsPerPage = "5";

answered Jun 28 '18 at 16:13

tymeJV

103,943
14
161
157

Guillaume Georges · Answer 2 · 2018-06-28T16:29:27.997

The blank option appears because ng-model can't find an option that matches the value of the bound property (option values are converted to string and the bound property is number).

If you don't want to change the type of your itemsPerPage property and make it a string, you can keep a number and define, in your $scope, an object with a getter and setter that will take care of the type conversion.

angular.module('dummyApp', [])
  .controller('DummyController', function($scope) {

    var itemsPerPage = 5; // still a number
    Object.defineProperty($scope, "itemsPerPage", {
      get: function() {
        return itemsPerPage + "";
      },
      set: function(newValue) {
        itemsPerPage = parseInt(newValue);
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<div ng-app="dummyApp" ng-controller="DummyController">
  <label>Items per page</label>
  <select class="form-control input-sm w25" ng-model="itemsPerPage">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
  </select>
</div>

Default option in select

2 Answers2