Lucas Santos Lucas Santos - 3 years ago 76
AngularJS Question

How can I use ng-if with ionicPopup

I'm trying to do so, when I click on the send button a popup appears, where if the person enters the correct message it goes to the next screen if not it stays on the screen that is.

my code :
my controller.js

.controller('loginController', function($scope, $stateParams, $ionicPopup, $ionicHistory, $state) {

$scope.Enviar = function(){


var confirmPopup = $ionicPopup.prompt({
title: 'Login',
template: 'Pergunta: Digite a P∴S∴ do AP∴?',
inputType: 'text',
inputPlaceholder: 'Digite a senha',
ng-model="login"
});
confirmPopup.then(function(res) {
if(res) {
$state.go('app.home');

} else {
console.log('teste');
$state.go('login');
}
})
}

})


my login.html

<ion-view view-title="login">
<ion-content class="login-principal" scroll="true">
<div class="login-imagem">
<img class="full-image" ng-src="img/GOMB.jpg">
</div>
<div>
<ion-list class="list-inset">
<ion-item class="item-input">
<i class="icon ion-ios-email-outline placeholder-icon"></i>
<input type="text" placeholder="E-mail">
</ion-item>
<ion-item class="item-input">
<i class="icon ion-ios-locked-outline placeholder-icon"></i>
<input type="text" placeholder="Senha">
</ion-item>
</ion-list>
<div class="row login">
<div class = "col col-50" >
<a class="button button-block button-dark" ui-sref="app.cadastroUsuario">Criar conta</a>
</div>
<div class = "col col-50" >
<a class="button button-block button-dark" ng-click="Enviar()">Entrar</a>
</div>
</div>
</div>
</ion-content>
</ion-view>


My question is how to use ng-model and ng-if with ionicPopup?

Answer Source

Instead of $ionicPopup.prompt you can just make use of $ionicPopup.show and in template property of its object write whatever the template you want (with ng-model & ng-if). You can also have buttons with their customizable text as well as particular action onTap (like returning model value of input fields inside popup). So, you can have following function to call popup:

$scope.showPopup = function() {
   $scope.data = {}
   // An elaborate, custom popup
   var myPopup = $ionicPopup.show({
     template: '<input type="password" ng-if="isNotConnected" 
                ng-model="data.wifi" placeholder="Enter Password">',
     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) {
             //don't allow the user to close unless he enters wifi password
             e.preventDefault();
           } else {
             return $scope.data.wifi;
           }
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log('Tapped!', res);
   });

};

Check out this codepen: https://codepen.io/anon/pen/wqwzPE

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download