javascriptangularjsng-dialog

Multiple panes in ngDialog Modal for Angular


In the example for ngDialog they show a modal that has multiple 'panes' that you can scroll through: http://likeastore.github.io/ngDialog/.

I read through the ngDialog guide and couldn't find an easy way to accomplish this - any ideas would be greatly appreciated. All I want is a button on the pane that you are able to click to go to the next pane in the modal. (Just like the example - but without the animation).

Thanks!

         //Here is my Controller instantiation of the ngDialog

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

And here is my HTML Template:

    <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>

Solution

  • You could do this in different way...

    Here is your HTML Login Template..

    <form name="loginForm" id="login" ng-controller="loginCtrl as vm">
        <h3>Login</h3>
        <p>         Login Form goes 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>
    

    and.. the Account HTML template...

    <form name="accountForm" id="account" ng-controller="loginCtrl as vm">
        <h3>Login</h3>
        <p>
            Account Form goes 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 is the angular script..

    (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) {
    
                    //Here you could close the current dialog and open a new dialog 
                     ngDialog.close('login'); // Give your Diloag element Id
                     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);
                });
            };
    
        };
    
    }());