Ionic - Javascript 動作面板

動作面板 (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">Action Sheet Button</button>

程式碼解釋

當我們點選按鈕時，它將觸發$ionicActionSheet.show函式，並且動作面板將出現。您可以建立自己的函式，這些函式將在點選其中一個選項時被呼叫。cancel函式將關閉面板，但您可以新增其他一些行為，這些行為將在點選取消選項之前被呼叫。

buttonClicked函式是您可以編寫程式碼的地方，這些程式碼將在點選其中一個編輯選項時被呼叫。我們可以使用index引數跟蹤多個按鈕。destructiveButtonCLicked是一個函式，當點選刪除選項時將被觸發。此選項預設為紅色。

$ionicActionSheet.show()方法還有一些其他有用的引數。您可以在下表中檢視所有引數。

顯示方法選項