Question

我试图这样做，当我点击发送按钮时会出现一个弹出窗口，如果有人输入了正确的信息，它会进入下一个屏幕，如果没有，它会停留在屏幕上。

我的代码：我的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');
               }
            })
  }

})

我的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>

我的问题是如何使用ng-model和ng-if with ionicPopup？

Answer 1

您可以只使用$ionicPopup.prompt代替$ionicPopup.show而在其对象的模板属性中编写您想要的任何模板（使用ng-model＆amp; ng-if）。您还可以使用带有可自定义文本的按钮以及onTap上的特定操作（例如返回弹出窗口内输入字段的模型值）。因此，您可以使用以下函数来调用弹出窗口：

$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);
   });

};

查看此codepen：https://codepen.io/anon/pen/wqwzPE

Answer 2

$scope.Enviar = function(){
            var obj = new String("boa");

            $ionicHistory.nextViewOptions({
                    disableBack : true
            })

            var confirmPopup = $ionicPopup.prompt({
              title: 'Login',
              template: 'Pergunta: Digite a?',
              inputType: 'text',
              inputPlaceholder: 'Digite em minusculo'
            });
            confirmPopup.then(function(res) {
               if(res == obj) {
                  $state.go('app.home');
                  console.log(res);
               } else {
                  //console.log('teste');
                  $state.go('login');
                  //console.log(res);
               }
            })
  }

如何使用ng-if和ionicPopup

2 个答案: