处理$ ionicPopup提示中的多个按钮

时间:2015-09-15 14:58:47

标签: javascript ionic-framework ionic

文档说:

  

显示一个简单的提示弹出窗口,其中包含输入,确定按钮和取消   按钮。如果用户,使用输入的值解析promise   如果用户按下取消,则按OK,并且未定义。

我在做:

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

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

  $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
    }
   }]

1 个答案:

答案 0 :(得分:5)

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

  

显示复杂的弹出窗口。这是主秀节目功能   所有弹出窗口。

     

复杂的弹出窗口有一个按钮数组,每个按钮都有一个文本   和类型字段,以及onTap函数。

您的代码将如下:

show()

上述代码的简单之处在于您使用$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) } }); } $scope)绑定输入,以便以任何方式访问它。