i want generate dynamic modals using ionic, , have created controller dynamically has id of ng-repeat item linked unique modal. modal under under ion-item
controller
$scope.showmodal = function(id){ $ionicmodal.fromtemplateurl(id+'-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); window.modal.show(); $scope.openmodal = function() { $scope.modal.show(); }; $scope.closemodal = function() { $scope.modal.hide(); }; } view
< ion-item collection-repeat="hist in history" ng-show="history.length" style="background:none;border:none"> <div class="list card" ng-click="showmodal(id)"> <div class="item "> <div class="row" > <div class="col col-25" > <span style="float:left;padding-top:0.4em"><i class="ion-clock largericon"></i></span> </div> <div class="col col-75" align="left"> <div style="float:left"> <div style="font-size:2em">{{hist.session_time}} </div> <div style="color:#999"> {{hist.human_date}}</div> </div> </div> </div> </div> </div> <script id="1-modal.html" type="text/ng-template"> <ion-modal-view style="background:#24112b"> <ion-header-bar class="bar bar-header bar-royal"> <h1 class="title">session started... </h1> <button class="button button-clear button-primary" ng-click="modal.hide()"><i class="ion-close-round"></i></button> </ion-header-bar> <ion-content class="padding"> <div style="padding-top:1.3em;padding-bottom:1.3em"> <div class="row" align="center" > <div class="col col-100" align="center">start keeping repetitions beat...</div> </div> </div> </ion-content> </ion-modal-view> </script> </ion-item>
see working: https://plnkr.co/edit/ucou4i?p=preview
$scope.showmodal = function(id){ $ionicmodal.fromtemplateurl(id+'-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; $scope.modal.show(); // show modal after loaded }); } edit: make sure ng-click="showmodal(id)" pass actual id...
Comments
Post a Comment