<div ng-repeat="localcost in vm.project.localCosts" layout="column">
<md-select name="localcost_{{$index}}"ng-model="localcost.year" flex>
<md-option ng-repeat="years in vm.getYears()" ng-value="years">{{years}}</md-option>
</md-select>
</div>
The select box is generated for each item in the localCost array, resulting in multiple select boxes. The available years (e.g. 2015, 2016...) are populated dynamically.
My goal is to restrict the selection of a year once it has been chosen. To achieve this, I have implemented a function within the controller that retrieves the range of years based on start and end dates:
function getYears() {
// Initialize start year
var startYear = null;
if ( angular.isDefined (vm.project.startDateObject._d) ) {
startYear = parseInt(vm.project.startDateObject.format('YYYY'));
}
// Initialize end year
var endYear = null;
if ( angular.isDefined(vm.project.endDateObject._d) ) {
endYear = parseInt(vm.project.endDateObject.format('YYYY'));
}
// Generate list of years
if (startYear && endYear) {
var years = [];
for (var i = startYear; i <= endYear; i++) {
years.push(i);
}
return years;
}
}