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
Post a Comment