选择默认选项

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?

Answer 1

Angular可能将该值转换为字符串，所以：

$scope.itemsPerPage = "5";

Answer 2

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> 

Answer 3

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

这应该工作^^