I am trying to show some modal pop up on a button click. I am able to display pop up but I am trying to display different pop up on the button click. In my code I take different HTML of pop up but when I click any button it show same pop up.Could you please tell me how to show different pop up screen on different button click
Here is my different pop up screen
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="modal.hide()">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
<script id="templates/copymodal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">copy Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">copy first Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="modal.hide()">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
js file // Code goes here
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$scope.firstpopup=function(){
$scope.modal.show()
}
$scope.secondpopup=function(){
$scope.modal.show()
}
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$ionicModal.fromTemplateUrl('templates/copymodal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
});
here is my code http://plnkr.co/edit/KXzUO5OL6Imy9yKP0Ktq?p=preview
You can name the modals differently on your scope. Something like this should work.
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$scope.firstpopup=function(){
$scope.modalFirst.show()
}
$scope.secondpopup=function(){
$scope.modalSecond.show()
}
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modalFirst = modal;
});
$ionicModal.fromTemplateUrl('templates/copymodal.html', {
scope: $scope
}).then(function(modal) {
$scope.modalSecond = modal;
});
});
You will also have to change the index.html to make sure that while closing the correct modal is being closed.