首页 > 其他 > 详细

ionic 对话框

时间:2020-07-07 22:45:42      阅读:58      评论:0      收藏:0      [点我收藏+]
[

ionic 对话框

$ionicPopup

ionic 对话框服务允许程序创建、显示弹出窗口。
$ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() 。

实例

HTML 代码


<body class="padding" ng-controller="PopupCtrl">

????<button class="button button-dark" ng-click="showPopup()">

????  弹窗显示

????</button>

????<button class="button button-primary" ng-click="showConfirm()">

????  确认对话框

????</button>

????<button class="button button-positive" ng-click="showAlert()">

????  警告框

????</button>



????<script id="popup-template.html" type="text/ng-template">

????  <input ng-model="data.wifi" type="text" placeholder="Password">

????</script>

</body>

JavaScript 代码


angular.module(‘mySuperApp‘, [‘ionic‘])

.controller(‘PopupCtrl‘,function($scope, $ionicPopup, $timeout) {



 // Triggered on a button click, or some other target

 $scope.showPopup = function() {

   $scope.data = {}



   // 自定义弹窗

   var myPopup = $ionicPopup.show({

     template: ‘<input type="password" ng-model="data.wifi">‘,

     title: ‘Enter Wi-Fi Password‘,

     subTitle: ‘Please use normal things‘,

     scope: $scope,

     buttons: [

       { text: ‘Cancel‘ },

       {

         text: ‘<b>Save</b>‘,

         type: ‘button-positive‘,

         onTap: function(e) {

           if (!$scope.data.wifi) {

             // 不允许用户关闭,除非输入 wifi 密码

             e.preventDefault();

           } else {

             return $scope.data.wifi;

           }

         }

       },

     ]

   });

   myPopup.then(function(res) {

     console.log(‘Tapped!‘, res);

   });

   $timeout(function() {

      myPopup.close(); // 3秒后关闭弹窗

   }, 3000);

  };

   //  confirm 对话框

   $scope.showConfirm = function() {

     var confirmPopup = $ionicPopup.confirm({

       title: ‘Consume Ice Cream‘,

       template: ‘Are you sure you want to eat this ice cream?‘

     });

     confirmPopup.then(function(res) {

       if(res) {

         console.log(‘You are sure‘);

       } else {

         console.log(‘You are not sure‘);

       }

     });

   };



   //  alert(警告) 对话框

   $scope.showAlert = function() {

     var alertPopup = $ionicPopup.alert({

       title: ‘Don\‘t eat that!‘,

       template: ‘It might taste good‘

     });

     alertPopup.then(function(res) {

       console.log(‘Thank you for not eating my delicious ice cream cone‘);

     });

   };

});

]
转载请保留页面地址:https://www.breakyizhan.com/c-3/23509.html

ionic 对话框

原文:https://www.cnblogs.com/breakyizhan/p/13263602.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!