CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-bootstrap
Ryan Exlay
Ryan Exlay

Reputation: 361

form separation in multiple sections using ionicModal

I am trying to create register form in ionicframework.

  1. user click register button and Modal form will slide-up.
  2. In this form, user have to add personal info such as name, email and password.
  3. User have to click next button.

I wish user to add extra information such as job info (job title, company name), contact info (phone no, address)

Here is my question.

how can I go to next section (job info) in ionicModal when user click to next button?

personal info will not be saved and user can go back to it section by back button in business info section.

user can register if they do not want to fill extra information such as job info and contact info

Thank advanced for suggestions.

Upvotes: 0

Views: 46

Answers (1)

Jess Patton
Jess Patton

Reputation: 2486

You can put a slide box inside the modal: http://ionicframework.com/docs/api/directive/ionSlideBox/

Then when they hit a next page button use the slide delegate to slide to the next page. http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/

if you do not want them to be able to slide to swipe(and only slide on button press) you can disable by using 

$scope.slidestop = function (index) {
            $ionicSlideBoxDelegate.enableSlide(false);
        };

if the user needs to go back you can just use the slide delegate to slide back to the previous slide. once they are done you can simple close the modal.

Upvotes: 2

Related Questions