Question

我想创建年份选择下拉列表。年必须从今年开始到未来7年。

我试过了

var year = new Date().getFullYear();
var range = [];

range.push(year);

for (var i = 1; i < 7; i++) {
    range.push(year + i);
}

$scope.years = range;

<select class="form-control"  ng-options="year for year in years" name="expiryMonth" ng-model="expiryMonth" required>'

但这会创建一个html，

<option label="2016" value="number:2016">2016</option>

这会创建一个必需的年份下拉列表但我希望Value是标签的最后两位数

另外，我的第一个选项应该是

<option value="">select month</option>

Answer 1

angular.module('app', [])
    .controller("Ctrl",
    function contactListCtrl($scope) {

       var year = new Date().getFullYear();
    var range = [];
    range.push(year);
    for (var i = 1; i < 7; i++) {
        range.push(year + i);
    }
    $scope.years = range;


    });

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>

    <script src="script.js"></script>
</head>

<body ng-controller="Ctrl">

<select class="form-control" ng-model="expiryMonth" required>
  <option>Select month</option>
  <option ng-repeat="year in years">{{year}}</option>
  </select>
</body>

</html>

Answer 2

如果您希望该值仅为标签的最后两位数，则可以扩展years对象，如：

var year = new Date().getFullYear();
var range = [];

for (var i = 0; i < 7; i++) {
    range.push({
      label: year + i,
      value: parseInt(String(year + i).slice(2, 4))
    });
}

$scope.years = range;

ng-options喜欢：

ng-options="year.value as year.label for year in years"

请参阅此Plunker

Answer 3

考虑使用ng-repeat创建newTestSessionCtrl.formData.event.subevents

[]

Answer 4

对于角度的日期和时间，我经常使用：

'UIB-日期选择器'

更多信息： https://angular-ui.github.io/bootstrap/

在此指令中，您可以使用'min-date'

 <input type="text" starting-day="0"  uib-datepicker="{{format}}" ng-model="vm.dateFrom" is-open="true" min-date="vm.minDate" max-date="vm.dateTo"  />

在你的控制器中：

vm.minDate = yourFunctionToDate()

Answer 5

我为你做了fiddle that you can find here

基本上，使用表达式track by为您的选项提供您想要的值。

Answer 6

请改为尝试：

<select ng-model="expiryMonth">
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

Answer 7

这将为您提供有用的动态年份范围。

let years: number[] = [];
let currentYear: number = new Date().getFullYear();
for(let i = (currentYear - 7); i < (currentYear + 7); i++) {
    years.push(i);
}

Angular创建动态年份下拉列表

7 个答案: