Ionic - Javascript Action Sheet

Action Sheet 是一项 Ionic 服务，它将触发屏幕底部的向上滑动窗格，您可以将其用于各种目的。

使用操作表

在下面的示例中，我们将向您展示如何使用 Ionic 操作表。首先，我们将将 $ionicActionSheet 服务作为依赖项注入到我们的控制器中，然后我们将创建 $scope.showActionSheet() 函数，最后我们将在 HTML 模板中创建一个按钮来调用我们创建的函数。

控制器代码

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
      // Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],
			
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
			
         cancel: function() {
            // add cancel code...
         },
			
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            }
				
            if(index === 1) {
               // add edit 2 code
            }
         },
			
         destructiveButtonClicked: function() {
            // add delete code..
         }
      });
   };
})

HTML 代码

<button class = "button">操作表按钮</button>

代码说明

当我们点击按钮时，它将触发 $ionicActionSheet.show 函数，并且操作表将出现。您可以创建自己的函数，当其中一个选项被点击时，这些函数将被调用。cancel 函数将关闭窗格，但您可以添加一些其他行为，当在关闭窗格之前点击取消选项时，这些行为将被调用。

在 buttonClicked 函数中，您可以编写代码，当其中一个编辑选项被点击时，这些代码将被调用。我们可以使用 index 参数跟踪多个按钮。 structiveButtonCLicked 是点击删除选项时触发的函数。此选项默认为红色。

$ionicActionSheet.show() 方法还有一些其他有用的参数。您可以在下表中查看所有这些选项。

显示方法选项