WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - JavaScript Popup


There are four types of popups namely − show, confirm, alert and prompt.

Using Show Popup

This popup is that the most advanced of all. To trigger popups, we want to inject the $ionicPopup service to our controller and so simply add a technique that may trigger the popup we would like to use, during this case $ionicPopup.show(). The onTap(e) perform are often used for adding e.preventDefault() methodology

Controller Code

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}
    
      // Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,
			
         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {
						
                  if (!$scope.data.model) {
                     //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });    
   };
})

HTML Code

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

Show Popup Options

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
scope Scope A scope of the popup.
buttons Array[Object]
Buttons that may be placed in footer of the popup. they'll use their own properties and ways. text is displayed on prime of the button, type is that the Ionic category used for the button, onTap is operate that may be triggered once the button is abroach. Returning worth|a worth|a price} can cause the promise to resolve with the given value.

Controller Code

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
	   var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
	};
})

HTML Code

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>


Confirm Popup Options

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
cancelText string The text for the Cancel button.
cancelType string The Ionic button type of the Cancel button.
okText string The text for the OK button.
okType string The Ionic button type of the OK button.

Welookups is optimized for learning.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com
Javacodegeeks