I have implemented two dropdown lists using the select tag. I want to dynamically update the options in the second dropdown based on the selection from the first dropdown, and then display relevant information underneath based on the selection from the second dropdown.
I have been advised to use $apply for this functionality, but I am unsure about where exactly to implement it and how to utilize it effectively. Any suggestions on what changes need to be made for this feature to work as intended would be highly appreciated.
Below are the files related to my implementation:
angular.module('app', []).controller('contr', function ($scope) {
$scope.data = [
{
name: 'Ala',
holiday: [
{ month: 'June', location: ['Rome', 'Wien'] },
{ month: 'July', location: ['Budapest', 'Bucharest'] },
{ month: 'August', location: ['Warsaw', 'Prague']}
]
},
{
name: 'Bob',
holiday: [
{ month: 'January', location: ['Paris', 'Madrid'] },
{ month: 'February', location: ['London', 'Dublin'] },
]
}
];
$scope.person = $scope.data[0];
$scope.holidays = $scope.person.holiday;
$scope.holiday = $scope.holidays[0];
$scope.locations = $scope.holiday.location;
});<!doctype html>
<html ng-app='app' ng-controller='contr'>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/myApp.js"></script>
<script src="js/angular.js"></script>
Person:<select ng-model='person' ng-options='info as info.name for info in data'></select></br>
Month:<select ng-model='holiday' ng-options='holiday as holiday.month for holiday in holidays'></select></br>
</br>Places:</br>
<div ng-repeat='location in locations'>Location: {{location}}</div>
</body>
</html>