Ionic - Javascript 操作表

---

操作表是一项 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">Action Sheet Button</button>

代码解释

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

ButtonClicked函数是您可以编写在点击编辑选项之一时调用的代码的地方。我们可以使用索引参数来跟踪多个按钮。structuralButtonCLicked是一个在点击删除选项时触发的函数。该选项默认为红色。

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

显示方法选项