Display successive slidedown notifications consecutively

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.

Answer №1

The for loop in your code is executing so quickly that the current alert is being updated to the second alert right after it's been updated to the first alert.

While I may not be well-versed in angularjs, here's a simple solution to demonstrate the problem:

  $scope.goThroughAlert = function() {
    let current = $scope.alerts[0];
    $scope.currentAlert.name = current.name;
    $scope.showFeedback();
    
    $timeout(() => {
      let current = $scope.alerts[1];
      $scope.currentAlert.name = current.name;
      $scope.showFeedback();
    }, 2000)
  }

You might consider introducing a delay between the alerts somehow.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interact with RESTful APIs using AngularJS

I have encountered an issue while trying to retrieve an object from the mongodb database using its _id and storing it in the $scope for future use. Instead of getting the specific object I requested, I am receiving all objects present in the database. As a ...

Event listener for clicking on a custom overlay in Google Maps

Incorporating Google Maps into an Ionic project, I have successfully added a custom overlay to display the address of a marker location on top of the map. By adding a click event listener to the map, I can detect clicks and update the marker for new locat ...

Having trouble with my Angular subscription - not behaving as I anticipated

I am facing an issue on my shop page where I have a FilterBarComponent as a child component. On initialization, I want it to emit all the categories so that all products are rendered by default. However, on my HomePageComponent, there is a button that allo ...

Switch the 360-degree images by clicking a button using Panolen.js

As a beginner in the world of html, css, and javascript, I am trying to create a webpage that displays 360 panorama images. My goal is to have the image change when a button is clicked - for example, clicking on button 1 will display image1, while clicking ...

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

While working in a service, my goal is to load a resource using $http, store it in a variable, load a child resource and store that as well. I understand the concept of promises for this task, but I am struggling with how to properly implement it in my cod ...

Ensuring the accuracy of phone numbers with the power of AngularJS

Is there a way to ensure that the phone number input is always 10 digits long using AngularJS? This is my attempted code: <form class="form-horizontal" role="form" method="post" name="registration" novalidate> <div class="form-group" ng-class= ...

Experiencing disconnection from SQL server while utilizing the Express.js API

Im currently working on an API that retrieves data from one database and posts it to another database, both located on the same server. However, I am facing issues with the connections. Initially, everything works fine when I run the app for the first time ...

How to properly escape JSON with hyphen or dash in AngularJS ngSrc

Having trouble displaying an image from a json url with dashes. I attempted to use bracket notation but it does not seem to be functioning: <img ng-src="{{image.['small-size'].url || image.thumb}}"> When using single quotes, my angular vi ...

Displaying an array of data from a list of arrays in AngularJS' session storage

Whenever a button is clicked, the data will be pushed into an array list and stored in session storage. var data = [ 'name':"name", 'id'=1 ]; var arrayList = new Array; arrayList.push(data); sess ...

Tinymce editor does not display icons as expected

I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the ...

Creating Scroll Animations in Javascript - Mastering scrollIntoView Animation

When I click on a div, I was only able to bring it into view with the scrollIntoView function. It functions correctly and meets my expectations, but I am curious if there is a way to animate it and slow down the process. I attempted a suggestion found her ...

Navigating the intricacies of passing a complex C# object through FromQuery

I have a client-side code snippet showcasing an object setup as follows: { "selectedItems": [ 4016, 3937 ], "selectedStatuses": [], "search": "foo" } My intention is to match this structure with a C# DTO: public class FilterModel { p ...

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

I am not encountering any errors; however, upon entering the room, my bot fails to initiate creation of a new channel

const Discord = require("discord.js") const TOKEN = "I forgot to include my token here" const { Client, GatewayIntentBits } = require('discord.js'); const { MemberFetchNonceLength } = require("discord.js/src/errors/Erro ...

Postgres Array intersection: finding elements common to two arrays

I'm currently developing a search function based on tags, within a table structure like this CREATE TABLE permission ( id serial primary key, tags varchar(255)[], ); After adding a row with the tags "artist" and "default," I aim ...

establish the data type for the key values when using Object.entries in TypeScript

Task Description: I have a set of different areas that need to undergo processing based on their type using the function areaProcessor. Specifically, only areas classified as 'toCreate' or 'toRemove' should be processed. type AreaType ...

Execute and generate a continuous loop in JavaScript

I successfully implemented an image slider using pure PHP, but encountered issues when integrating it into Yii framework. The images were not loading due to the following reasons: - JavaScript block was not loading image numbers. - I am unsure how to load ...

Automatically selecting the map center while using the Drawing Manager feature for placing markers

My application utilizes the Google Drawing Library. When a user clicks on the Add New Marker Button, the Drawing Manager is activated allowing the user to generate a marker by clicking anywhere on the map. Subsequently, the following listener is executed: ...

Retrieving a numerical value from a constantly changing string

The string is constantly changing. For example: Date15:Month8:Year1990 Is there a way to extract the number 15 without using substring, since the values are always different? I am looking to extract only the number after "Date" and before ":". ...

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...