select ng-options 年份列表，默认查看当前年份

Question

我在 angularjs 中使用 select 和 ng-options 来显示我自己构建的年份列表。

我的问题是：

点击下拉列表如何显示当前年份？我的意思是，假设 2017 年在哪里，当用户单击时，默认选择将是 2017 年，它位于列表的中间。该列表将按时间顺序排列，从当年的前 20 年开始，到当年的 20 年后结束。换句话说，通过单击列表，第一个可见的默认选择将是当前年份，用户可以上下滚动年份。

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    var current_year = new Date().getFullYear();
    for(var i = current_year - 20; i <= current_year + 20; i++){
        $scope.years.push({value: i + ''});
    }

});

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body ng-app="app">
 <div ng-controller="MyCtrl">

        <label class="control-label">Year</label>
  <select name="startYear" ng-model="dates.startYear" id="startYear"
          ng-options="year.value as year.value disable when year.disabled for year in years"
          required>
      <option value="" disabled >Choose one</option>
  </select>
</div>
</body>

更新 1：

为了消除误解，我只想在单击列表时将列表置于当前年份的中心，否则，默认显示值是 "choose one"，但默认视图应以当前为中心打开列表的年份。

更新 2：

这是我的下拉菜单：

http://preview.themeforest.net/item/cliptwo-bootstrap-admin-template-with-angularjs/full_screen_preview/10290688

转到表格/表格向导/步骤 3 账单

上面这个link的默认值是"Year"这个词，但是点击的时候会打开年份列表，而且列表没有以当前年份为中心。假设今年之前有 40 年，之后有 40 年，那么用户必须不停地向下滚动到当年。因此，想法是在单击框时以当前年份为中心。这是与之相关的 css 文件，link css.

Answer 1

您需要先获取当前日期，然后才能获取全年。代码如下。此外，请将您的 years.value 修改为整数，并立即分配给您的 ng-model (dates.startYear)。瞧！希望这可以帮助。

   var app = angular.module('app', []);

    app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    for(var i = 1990; i <= 2040; i++){
        $scope.years.push({value: i});

    }

    var d = new Date();
    var n = d.getFullYear();

    $scope.dates.startYear = n;
    console.log(n);

    });

这是 plnkr example。

更新

这是一个 plnk update。

基本上，我把它放在一个函数中并在 select 中点击 ng-click 时触发。

select ng-options 年份列表，默认查看当前年份

select ng-options list of years and see current year by default

javascript

css

angularjs

drop-down-menu

angularjs-ng-options

我的问题是：

更新 1：

更新 2：