javascript - Ionic popup template for username and password -


i using ionic make mobile app.i want use popup window collect 2 pieces of data, username , password. looked through lot of website, shows how popup window can collect 1 piece of data, not two. also, make popup window purple color. how can that?

$scope.create = function() {     $scope.data = {};    // elaborate, custom popup   var mypopup = $ionicpopup.show({     template: '<input type="password" ng-model="data.one">',     style: 'background-color:purple;',     title: 'enter wi-fi password',     scope: $scope,     buttons: [       { text: 'cancel' },       {         text: '<b>save</b>',         type: 'button-balanced',         ontap: function(e) {           if ((!$scope.data.one)&&(!$scope.data.two)) {             e.preventdefault();           } else {             return $scope.data;           }         }       }     ]   }); } 

you can achieve using $ionicmodal

here working example

html

  <script id="add-or-edit-cart.html" type="text/ng-template">          <ion-modal-view>             <ion-header-bar>                 <h1 class="title">{{ action }} page</h1>                 <div class="buttons">                     <button ng-click="deletecart()" class="button button-icon icon ion-close"></button>                 </div>             </ion-header-bar>             <ion-content>                 <div class="list list-inset">                     <label class="item item-input">                       dummy text                     </label>                  </div>              </ion-content>         </ion-modal-view>      </script> 

add ng-click view cart present in footer

<ion-footer-bar  class="bar-footer btn-footer bar-light">   <div class="row">     <div class="col">       <button ng-click="vm.showcart()" ng-controller="overviewcontroller vm" class="button  button-block button-positive"> view cart page </button>     </div>     <div class="col">       <button class="button  button-block button-calm"> view checkout page </button>     </div>   </div> </ion-footer-bar> 

js

add following controller

.controller('overviewcontroller', function ($scope, $ionicmodal) {     var vm = this;      $ionicmodal.fromtemplateurl('add-or-edit-cart.html', {         scope: $scope,         animation: 'slide-in-up'     }).then(function (modal) {         $scope.modal = modal;     });      vm.showcart = function () {         $scope.cart = {};         $scope.action = 'cart';         $scope.isadd = true;         $scope.modal.show();     };         $scope.deletecart = function () {          $scope.modal.hide();     };      $scope.$on('$destroy', function () {         $scope.modal.remove();     });      return vm; 

and here working codepen


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -