Enhance User Experience with ngDialog Modal's Multi-pane Feature for Angular

Looking at the ngDialog example, they showcase a modal with multiple 'panes' that can be scrolled through: .

After going through the ngDialog guide, I couldn't find a straightforward way to achieve this. Any suggestions on how to add a button on each pane for moving to the next one in the modal would be highly appreciated. I'm aiming for functionality similar to the example shown, but without the animation.

Thanks!

//This is how I initialize ngDialog in my Controller

$scope.clickToOpen = function(testy) {
     ngDialog.open({
         template: 'createNewTemplate',
         scope: $scope
     });
};

Here's the HTML Template I am using:

<form ng-submit="login()">
    <h1>Login</h1>
    <input type="text" ng-model="loginUser.email" placeholder="Email">
    <input type="text" ng-model="loginUser.password" placeholder="Password">
    <button ng-click="goToNextPane()"> Login </button>
</form>

Answer №1

If you're looking to approach this task from a different angle...

Check out this Login Template in HTML format:

<form name="loginForm" id="login" ng-controller="loginCtrl as vm">
    <h3>Login</h3>
    <p>         Insert your login form content here...
    </p>
    <button type="button" ng-disabled="loginForm.$invalid" ng-click="confirm()" class="btn btn-success pull-right">Next</button>
        <button type="button" ng-click="closeThisDialog('login')" class="btn btn-success pull-left">Cancel</button>
    <br> </form>

Additionally, the Account HTML template looks like this:

<form name="accountForm" id="account" ng-controller="loginCtrl as vm">
    <h3>Login</h3>
    <p>
        Add your account form details here...
    </p>
    <button type="button" ng-disabled="accountForm.$invalid" ng-click="confirm()" class="btn btn-success pull-right">Update</button>
        <button type="button" ng-click="closeThisDialog('account')" class="btn btn-success pull-left">Cancel</button>
    <br>
</form>

Here's a snippet of the angular script that corresponds to these templates:

(function () {
    "use strict";
    angular
        .module("dialogDemo")
        .controller("loginCtrl", ["ngDialog", loginCtrl]);

    function loginCtrl(ngDialog) {

        var vm = this;

        vm.login = function () {
            ngDialog.openConfirm({
                template: 'login.html',
                className: 'ngdialog-theme-default',
                showClose: false
            }).then(function (value) {

                 ngDialog.close('login'); 
                 ngDialog.openConfirm({
                     template: 'updateAccount.html',
                     className: 'ngdialog-theme-default',
                     showClose: false
                 }).then(function (value) {
                     console.log('Modal promise resolved. Value: ', value);
                 }, function (reason) {
                    console.log('Modal promise rejected. Reason: ', reason);
                 });

                console.log('Modal promise resolved. Value: ', value);
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
            });
        };

    };

}());

Answer №2

Although this response may seem unrelated to your initial inquiry, I stumbled upon it while exploring various dialog providers.

By the way, I have a modified version of ngDialog (https://github.com/danahartweg/ngDialog) that includes support for multiple panes. It's a bit outdated compared to the original, but I haven't had the opportunity to update it yet. My attempt to integrate it into ngDialog was rejected because they didn't want to add unnecessary bulk to the main library.

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

Mastering the Art of Modifying HTML with Node.js

Is it possible to manipulate HTML using Node.js? 1. First, I need to retrieve data from a database. 2. Then, I need to modify or add HTML code within Node. In essence, the goal is to fetch data and integrate it into an HTML file. The JavaScript snippet ...

Creating a schedule by aligning each day of the week with its corresponding date

weekly calendar<----img here--! I am looking to enhance my weekly table by incorporating a calendar system into it. Instead of just displaying the year in the image, I want it to showcase a 7-day week layout (for example: 12/20/20 - 12/27/2020), with ...

Exploring the power of Vue i18n for prop translations in Vue applications

My goal is to translate the titles passed to my component through props. However, it seems that these strings are not being translated like the rest of my code due to being passed as props. Below are the two components I am currently working with: Parent ...

jQuery event.preventDefault not functioning as expected

I am attempting to use jQuery's preventDefault() method, but when I submit the form, it still displays the default behavior and reloads the page. Here is the code from index.html: <body> <script src="/socket.io/socket.io.js"></script& ...

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

What could be the reason behind Next.js attempting to import a non-existent stylesheet?

Lately, I've come across an issue where Nextjs is attempting to import a non-existent stylesheet (refer to the images below). I'm looking for guidance on how to resolve this error. Hoping to find a solution here, thank you Web browser console W ...

Trouble updating document with MongoDB updateOne when using ID as filter

I need to update a property value of a specific document by sending a request to my NextJs API using fetch. // Update items in state when the pending time in queue has passed, set allowed: true items.map((item) => { const itemDate = new Date(item.adde ...

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

Challenges with sending JSON encoded Arrays from WordPress to PHP results in empty or NULL responses

My Plugins site has multiple Inputs that I need to gather values from and push them into an array. Then, I utilize the jQuery.post method to send this data to my PHP script. Javascript: var json = JSON.stringify(output); // output is an array with multip ...

Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution. The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously. What I aim for is to have the .hidden element fad ...

What causes old data to linger in component and how to effectively clear it out

Fetching data from NGXS state involves multiple steps. First, we define the state with a default list and loading indicator: @State<CollectionsStateModel>({ name: 'collections', defaults: { collectionList: [], (...), isListLoading: true, ...

Displaying JSON data using AngularJS

Just starting out with AngularJS and I'm facing an issue. I have a JSON object coming from my Spring controller, but I'm not sure how to use or print it in my JSP. I attempted the following code snippet. The console displays the JSON perfectly f ...

Autocomplete feature enhanced with the ability to validate and clear out

Here's a snippet of my HTML code: <div class="form-group"> <label for="date_chargement" class="col-sm-4 control-label">Minimum loading date:</label> <div class="col-sm-2"> <input type="text" class="form-control te ...

Ways to update the content of a NodeList

When I execute this code in the console: document.querySelectorAll("a.pointer[title='Average']") It fetches a collection of Averages, each with displayed text on the page: <a class="pointer" title="Average" onclick="showScoretab(this)"> ...

Utilizing jQuery/Ajax to send an ID parameter to a PHP script

This code is where the user interacts. <html> <head> <title></title> <script src="jquery-1.9.1.js"></script> <script src="jquery.form.js"></script> </head> <body> <?php include 'con ...

Managing and retrieving data in bulk from an indexed database as JSON format

I am currently developing an application that utilizes IndexexDB for local data storage. I am looking for a way to extract and insert large amounts of data from an indexed DB in JSON format. Below is the code snippet illustrating what I have accomplished s ...

Transform a PHP array into a JavaScript array with UTF-8 encoding

I am currently facing an issue with a products table that contains foreign characters. My goal is to utilize a PHP array in JavaScript to filter a dropdown box as the user types. Everything seems to be working fine except when encountering foreign characte ...

Having trouble with utilizing react-select and its menuIsOpen attribute?

Currently, I'm navigating a complex component that requires the use of an options list. As react-select is already implemented throughout my application, it seems logical to utilize it in this scenario as well. My goal is to integrate react-select inl ...

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

Visualize data from ajax call in tabular format

I want to display the results of an SQL query in a table using AJAX. I have written code that executes the query during the AJAX call, but when I try to display these values in a table, it shows null values on the div tag. What could be the reason for this ...