Ionic-JavaScriptアクションシート

アクションシート*は、画面の下部にあるスライドアップペインをトリガーする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 関数がトリガーされ、アクションシートが表示されます。オプションの1つがテープで録音されたときに呼び出される独自の関数を作成できます。 cancel 関数はペインを閉じますが、ペインを閉じる前にキャンセルオプションがタップされたときに呼び出される他の動作を追加できます。

*buttonClicked* 関数は、編集オプションの1つがタップされたときに呼び出されるコードを記述できる場所です。 *index* パラメーターを使用して、複数のボタンを追跡できます。 *destructiveButtonCLicked* は、削除オプションがタップされたときにトリガーされる関数です。 このオプションは、デフォルトで赤です。

イオンアクションシート

$ ionicActionSheet.show（）*メソッドには、他にも便利なパラメーターがいくつかあります。次の表でそれらすべてを確認できます。

メソッドオプションの表示

Properties	Type	Details
buttons	object	Creates button object with a text field.
titleText	string	The title of the action sheet.
cancelText	string	The text for cancel button.
destructiveText	string	The text for a destructive button.
cancel	function	Called when cancel button, backdrop or hardware back button is pressed.
buttonClicked	function	Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet.
destructiveButtonClicked	function	Called when destructive button is clicked. Return true will close the action sheet.
cancelOnStateChange	boolean	If true (default) it will cancel the action sheet when navigation state is changed.

Ionic-js-action-sheet

目次