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 函数并显示Action Sheet。您可以创建自己的函数，当其中一个选项被录音时将调用这些函数。该取消的功能将关闭窗格，但是你可以添加一些其他的行为，当取消面板被关闭之前选择被窃听，这将被调用。

该 buttonClicked 功能是你可以写当编辑选项中的一个被窃听将被调用的代码的地方。我们可以使用 index 参数跟踪多个按钮。该 destructiveButtonCLicked 是当删除选项被窃听时将触发功能。 默认情况下， 此选项为红色。

Ionic行动表

在 $ ionicActionSheet.show（） 方法有一些其他有用的参数。您可以在下表中查看所有这些内容。

显示方法选项

属性	类型	细节
buttons	object	使用文本字段创建按钮对象。
titleText	string	行动表的标题。
cancelText	string	取消按钮的文本。
destructiveText	string	破坏性按钮的文本。
cancel	function	按下取消按钮，背景或硬件后退按钮时调用。
buttonClicked	function	点击其中一个按钮时调用。索引用于跟踪点击哪个按钮。返回true将关闭操作表。
destructiveButtonClicked	function	单击破坏性按钮时调用。返回true将关闭操作表。
cancelOnStateChange	boolean	如果为true（默认值），则在导航状态更改时将取消操作表。