Ionic Modal+Forms

Having a state with a form and a modal on top of that with also a form, allows you to change the form under the modal.

by Ebuka Chibueze

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css">
<script src="http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.js"></script>
<div ng-app="ionicApp">
    <ion-tabs class="tabs-icon-only tabs-positive">

        <ion-tab title="Home" icon="ion-ios7-filing">
            <ion-header-bar class="bar-positive">
                <h1 class="title">Form</h1>
            </ion-header-bar>
    
            <ion-content has-tabs="true" ng-controller="HomeCtrl">
              <form role="form">
                <ion-list>
                  <!-- Personal data section -->
                  <div class="item item-divider">User form</div>
                  <div>
                    <label class="item item-input" ion-item>
                        <input type="email" placeholder="E-mail" />
                    </label>
                    <label class="item item-input" ion-item>
                        <input type="text" placeholder="Name" />
                    </label>
                    <label class="item item-input" ion-item>
                        <input type="text" placeholder="Phonenumber" />
                    </label>
                  </div>
                </ion-list>
              </form>

                <p class="padding">
                    <button class="button button-positive button-block button-outline" ng-click="triggerModal()">Trigger modal</button>
                </p>
            </ion-content>
        </ion-tab>
    </ion-tabs>
</div>

JavaScript

angular.module('ionicApp', ['ionic'])

.controller('HomeCtrl', function($scope, $ionicModal) {
    $scope.triggerModal = function() {
        // JSFiddle didn't seem to like ng-template script tags...
        $ionicModal.fromTemplate('<ion-modal-view><ion-header-bar class="bar-positive"><h1 class="title">Modal form</h1></ion-header-bar><ion-content class="padding"><p style="text-align: center;">Please use shift + tab a few times and notice you\'ll be able to access the form below the modal.</p><form role="form"><ion-list><label class="item item-input" ion-item><input type="text" placeholder="Modal value" /></label></ion-list></form></ion-content></ion-modal-view>').show();
    };
})