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

JavaScript does not alter the text box for the default dropdown value

My webpage has three elements: a text box named txtSubTotal, a drop-down menu named discount, and another text box called txtGrossTotal. The txtSubTotal updates when the user clicks on the 'ADD' button, while the txtGrossTotal updates based on th ...

Setting default values for number inputs in Angular JS

Just starting out with AngularJS and running into an issue. I have a number input field that I want to populate with a value from a JSON file. Strangely, assigning the value using ng-model isn't working for me in this case. It works fine with a regul ...

Having trouble with querySelector or getElementById not functioning properly?

Currently, I am in the midst of developing an experimental web application that features a quiz component. For this project, I have implemented a Python file to handle the questions and quiz functionalities. However, I have encountered an issue with the Ja ...

Filtering incoming data from a Firestore database: A step-by-step guide

I'm facing a challenge while trying to incorporate this filtering mechanism into my code. FILTERING An issue arises when I attempt to implement the following lines of code: function search(text: string, pipe: PipeTransform): Country[] { return CO ...

What causes the reflection of JavaScript variables when there is a change in ng-model?

By declaring the object globally and assigning it during an HTTP call when the Angular controller loads, I am able to update the values of this object in the Angular scope variables and access them through ng-models. When a button is clicked and one of the ...

What could be causing my JSON product list to not load properly?

My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...

What circumstances could lead to a timeout while executing sequelize in a Node.js environment?

Within my application built with Node.js version 10.15.0, I utilize the sequelize package (version 4.44.3) to establish a connection to a remote MySQL database. This application operates within a Docker container. However, after prolonged usage, I encounte ...

What is the best way to determine when all asynchronous tasks and callbacks have been completed so that we can proceed securely?

Here is a code snippet that reads a file containing documents sorted by categories and values in descending order. It then modifies the documents with the highest value for each category. Below is the code: var MongoClient = require('mongodb'). ...

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

Angular2 - Access to fetch at 'https://example.com' from

Requesting some guidance on integrating the forecast API into my angular2 application. Currently facing a Cross-Origin Error while attempting to access the API. Any suggestions on resolving this issue? search(latitude: any, longitude: any){ consol ...

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

Utilize Angular2 with ES6 modules while running an Express server

Having some issues using ES6 Modules with Angular2 in an app served by Node.js and Express.js. When attempting to load the Angular2/ES6 app in browser, encountered this error message in the FireFox console: The stylesheet http://localhost:8080/boot.css w ...

Unauthenticated user attempting to send a post request via React JS without proper authentication

Currently, I am working on a project where I am following a video tutorial that demonstrates how to authenticate a user using node and passport JS. The tutorial itself uses Hogan JS as its view engine, but I have decided to implement React as my front end ...

Best practices for including jQuery in ASP.NET (or any other external JavaScript libraries)

Can you explain the distinctions among these three code samples below? Is there a preferred method over the others, and if so, why? 1.Page.ClientScript.RegisterClientScriptInclude(typeof(demo), "jQuery", Re ...

tips on setting the time format in dimple.js

Trying to create a multi-line graph using dimple.js based on some sample code. I have flattened my JSON into an array and thought I had the code down, but I'm stuck. I am including these 2 libraries (using cloudflare dimple for security reasons): &l ...

Exploring the benefits of integrating Apache Thrift with TypeScript

After running the apache thrift compiler, I now have generated .js and .d.ts files. How do I incorporate these files into my current Angular2/Typescript project? I attempted to do so with the following lines of code: ///<reference path="./thrift.d.ts"/ ...

I am interested in redirecting command line output to a file rather than displaying it in the standard

Is it possible to use child-process and spawn in node.js to execute a command and save the output to a file instead of displaying it on the standard output? test.js const expect = require('chai').expect; const { spawn } = require('child_pr ...

Prevent tooltip text from appearing when a button is disabled in an angular application

As a beginner in UI development, I have a requirement for my Angular application. I need to enable and disable a button based on certain conditions. The tricky part is that I want to display a tooltip only when the button is enabled. I have managed to chan ...

What methods can I utilize to prevent pop-up errors from appearing in my javascript code?

Recently, I've been working on utilizing an innovative IBM tool called Presto that efficiently transforms traditional green screens into browser-based pages. While the process is effective, it involves some quirky behaviors. One particular challenge I ...

URL not passing on variable

Here is the code I have for a basic 'change email' script. I'm currently struggling to get it working and can't figure out what's wrong. <?php if (isset($_GET['u'])) { $u = $_GET['u']; } if (isset($_POS ...