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

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

$scope.itemsPerPage = "5";

Answer 2

出现空白选项是因为ng-model找不到与绑定属性值匹配的选项（选项值转换为字符串，并且绑定属性为number）。

如果您不想更改itemsPerPage属性的类型并将其设置为字符串，则可以保留一个数字，并在$scope中定义一个带有getter和setter的对象。这将负责类型转换。

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>

这应该工作^^

选择中的默认选项

3 个答案: