I am working on a dropdown list and my goal is to have the default option selected when the page loads
<b>Filter Within Months:</b>
<select class="btn green" ng-model="myOptions" ng-options="i.label for i in items track by i.id" ng-change="selectedItemChanged()">
</select>
In the controller.js file, I am setting the model to "Default" on load.
$scope.myOptions.id = 0;
$scope.items = [{
id: 0,
label: 'Default'
}, {
id: 1,
label: 'All'
}, {
id: 2,
label: '3 month'
}, {
id: 3,
label: '6 month'
}, {
id: 4,
label: 'Previous Month'
}];
$scope.selectedItemChanged = function() {
var date = new Date();
var endDate = Date.now();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var firstDayOfPreviousMonth = new Date(date.getFullYear(), date.getMonth() - 1, 1)
var lastDayOfPreviousMonth = new Date(date.getFullYear(), date.getMonth(), 0)
if ($scope.myOptions.id === 1) { //show All
startDate = null;
} else if ($scope.myOptions.id === 2) { //show 3 month
startDate = date.setDate(date.getDate() - 90);
} else if ($scope.myOptions.id === 3) { //show 6 month
startDate = date.setDate(date.getDate() - 180);
} else if ($scope.myOptions.id === 4) { //show Previous Month
startDate = Date.parse(firstDayOfPreviousMonth);
endDate = Date.parse(lastDayOfPreviousMonth);
} else { //Default
startDate = Date.parse(firstDay)
}
$scope.selectedDateFilterRange();
}
$scope.selectedDateFilterRange = function() {
//filter the data
}
However, I am encountering an error when running the code
TypeError: Cannot set property 'id' of undefined at $scope.myOptions.id = 0;