javascript - 在 $ionicPopup 提示中处理多个按钮

标签 javascript ionic-framework

文档说:

Show a simple prompt popup, which has an input, OK button, and Cancel button. Resolves the promise with the value of the input if the user presses OK, and with undefined if the user presses Cancel.

我在做:

$ionicPopup.prompt({ 
  //options 
}).then(function (userinput) {
  //get userinput and send to server
});

我需要添加第三个按钮,但无法获取输入的文本,如何解决按钮的 onTap 事件上的 promise 以获取输入?

  $ionicPopup.prompt({
   title: '¿Are you sure?',
   inputType: 'text',
   buttons: [
   { text: 'Cancel' 
     //close popup and do nothing
   },
   {
    text: 'NO',
    type: 'button-assertive',
    onTap: function(e) {  
      //send to server response NO
    }
   },
   {
    text: 'YES',
    type: 'button-energized',
    onTap: function(e) { 
      //get user input and send to server
    }
   }]

最佳答案

查看我用您的代码制作的演示:http://play.ionic.io/app/ac79490c8914
prompt()并不意味着添加两个以上的按钮,show()用于制作复杂的弹出窗口,请参阅show()同一文档中的方法。正如文档中所写,我引用:

Show a complex popup. This is the master show function for all popups.

A complex popup has a buttons array, with each button having a text and type field, in addition to an onTap function.

您的代码如下:

$scope.showPop = function(){
    $scope.data = {};
    var myPopup = $ionicPopup.show({
    template: '<input type="text" ng-model="data.myData">',
    title: '¿Are you sure?',
    scope: $scope,
    buttons: [
   { text: 'Cancel' 
     //close popup and do nothing
   },
   {
    text: 'NO',
    type: 'button-assertive',
    onTap: function(e) {  
      return null;
    }
   },
   {
    text: 'YES',
    type: 'button-energized',
    onTap: function(e) { 
      return $scope.data.myData;
    }
   }]
  });
  myPopup.then(function(userinput) {
    if(userinput){
      console.log('returned data'+ userinput)
    }
  });
}

关于上面的代码,简单的事情是你已经绑定(bind)了 $scope 的输入。 ( <input type="text" ng-model="data.myData"> ) 这样您就可以以任何方式访问它。

关于javascript - 在 $ionicPopup 提示中处理多个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32589326/

相关文章:

javascript - 从 vue 组件中的数据函数创建可重用的逻辑

google-maps - 收到错误 - ERROR TypeError : Cannot read property 'constructor' of undefined - in IONIC Native Google Maps

javascript - 如何在 Angular 5 中添加图像?

sockets - 无法让 blocshop TCP sockets-for-cordova 工作

javascript - Auth 后的 Ionic/Firebase 成功函数

javascript - 比较js中的mscrm GUID

javascript - 仅当内容超出高度而不是宽度限制时,文本溢出省略号?

javascript - Uncaught ReferenceError : caiet is not defined

java - 从当前jsp页面注销到登录页面

angularjs - 导入 C3 和 D3 时出现 Typescript 编译错误