角の作成動的年のドロップダウン

年の選択ドロップダウンを作成したいと思います。今年から次の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>

また、これは必要な年のドロップダウンを作成しますが、私は値がラベル

の最後の2桁になりたいです、私の最初の選択肢は、次のようになります

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

出典

2016-11-23 monda

を理解しないでください。モデルの値はラベルと同じです。このPlunkerを参照してくださいhttps://plnkr.co/edit/ygxpfIlheIhGE8MvUIIR?p=preview – gauss

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="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" 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>

出典

2016-11-23 10:12:06

作成するために、NG-繰り返しの使用を検討して、あなたの角度での日付と時刻、私は頻繁に使用するために<option>

<select class="form-control" name="expiryMonth" ng-model="expiryMonth" required> 
    <option value="">select month</option> 
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option> 
</select>

出典

2016-11-23 09:45:06

実際にng-optionsを使用することをお勧めします。 – trichetriche

1. ng-repeatよりもng-repeatがお勧めです。2.推奨機能を使用するためにコードを複雑にする理由... –

：

'UIB-DatePickerの'

詳細情報： 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()

出典

2016-11-23 09:46:02 Michalmw

あなたは、その値がラベルの下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

出典

2016-11-23 10:10:51 gauss

を参照してください。私はあなたのオプションに必要な値を与えることを表現track byを使用し、基本的にあなたにfiddle that you can find here

を作りました。

出典

2016-11-23 10:13:18 trichetriche

は、代わりにこれを試してみてください：

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

出典

2016-11-23 12:52:16

角の作成動的年のドロップダウン

答えて

関連する問題