I want to implement a feature that shows slide down alerts using angularjs. Here is the code I have written:
function LoginController($scope, $timeout) {
$scope.alerts = [{
name: "Alert 01 something something"
},
{
name: "Alert 02 something something"
}
];
$scope.currentAlert = {
name: "Something something"
};
$scope.showFeedback = function() {
$("#notification-alert").slideDown(500);
$timeout(() => {
$("#notification-alert").slideUp();
}, 1500)
};
$scope.goThroughAlert();
}
Here is the html structure:
<div ng-app ng-controller="LoginController">
<div class="alert alert-info my-feedback" id="notification-alert">
<div>{{currentAlert.name}}</div>
</div>
</div>
Currently, the alerts are not sliding down as intended. I tried looping through the alerts array and displaying messages one by one but only one message (Alert 02) is being shown. Can you help me figure out what went wrong in the code? My aim is to show Alert 01 first, then slide it up and display Alert 02, and so on if there are more items in the array. You can view the example on jsfiddle here.
https://jsfiddle.net/jcpw1nhk/
Thank you for your assistance.