Опция по умолчанию в выборе

Question

У меня есть очень простой элемент выбора:

<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>

с контроллером:

 $scope.itemsPerPage = 5; // default value

Но значение по умолчанию является пустым параметром, а попытка значения по умолчанию ничего не делает.

Как мне сделать значение 5 по умолчанию?

Answer 1

<option value="5" selected>5</option>

Это должно работать ^^

Answer 2

Пустой параметр появляется, потому что ng-model не может найти параметр, соответствующий значению связанного свойства (значения параметров преобразуются в строку, а связанным свойством является число).

Если вы не хотите изменять тип вашего свойства itemsPerPage и делать его строкой, вы можете сохранить число и определить в вашем $scope объект с геттером и сеттером, который позаботится преобразования типа.

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>

Answer 3

Angular, вероятно, преобразует это значение в строку, так что:

$scope.itemsPerPage = "5";