Ionic-js-popup

提供：Dev Guides
移動先:案内、検索

Ionic-JavaScriptポップアップ

このサービスは、ユーザーとの対話に使用される通常のビューの上にポップアップウィンドウを作成するために使用されます。 4種類のポップアップがあります- show 、 confirm 、 alert 、 prompt 。

ポップアップを表示する

このポップアップはすべての中で最も複雑です。 ポップアップをトリガーするには、コントローラーに $ ionicPopup サービスを挿入し、使用するポップアップをトリガーするメソッド（この場合は* $ ionicPopup.show（））を追加するだけです。 * onTap（e）*関数を使用して e.preventDefault（）*メソッドを追加できます。これは、入力に変更が適用されていない場合にポップアップを開いたままにします。 ポップアップが閉じられると、約束されたオブジェクトは解決されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}

     //Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,

         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {

                  if (!$scope.data.model) {
                    //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

Ionic Popup Show

おそらく、上記の例でいくつかの新しいオプションが使用されていることに気づいたでしょう。 次の表では、これらのオプションとそのユースケースをすべて説明します。

ポップアップオプションを表示

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
scope Scope A scope of the popup.
buttons Array[Object] Buttons that will be placed in footer of the popup. They can use their own properties and methods. text *is displayed on top of the button, type is the Ionic class used for the button, onTap* is function that will be triggered when the button is tapped. Returning a value will cause the promise to resolve with the given value.

ポップアップの確認の使用

Confirm Popupは、Ionicポップアップのよりシンプルなバージョンです。 ユーザーには、キャンセルボタンとOKボタンを押して、対応する機能をトリガーできます。 いずれかのボタンが押されたときに解決される約束されたオブジェクトを返します。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
       var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
    };
})

HTMLコード

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

Ionic Popup Confirm

次の表は、このポップアップに使用できるオプションを説明しています。

ポップアップオプションの確認

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
cancelText string The text for the Cancel button.
cancelType string The Ionic button type of the Cancel button.
okText string The text for the OK button.
okType string The Ionic button type of the OK button.

アラートポップアップの使用

アラートは、アラート情報をユーザーに表示するために使用される単純なポップアップです。 ポップアップを閉じて、ポップアップの約束されたオブジェクトを解決するために使用されるボタンは1つだけです。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
        //Custom functionality....
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

それは次の画面を生成します-

Ionic Popup Alert

次の表に、アラートポップアップに使用できるオプションを示します。

アラートポップアップオプション

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
okText string The text for the OK button.
okType string The Ionic button type of the OK button.

プロンプトポップアップの使用

Ionicを使用して作成できる最後のIonicポップアップは prompt です。 入力からの値でプロミスを解決する[OK]ボタンと、未定義の値で解決する[キャンセル]ボタンがあります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });

      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

それは次の画面を生成します-

Ionic Popup Prompt

次の表に、プロンプトポップアップに使用できるオプションを示します。

プロンプトポップアップオプション

Option Type Details
template string Inline HTML template of the popup.
templateUrl string URL of the HTML template.
title string The title of the popup.
subTitle string The subtitle of the popup.
cssClass string The CSS class name of the popup.
inputType string The type for the input.
inputPlaceholder string A placeholder for the input.
cancelText string The text for the Cancel button.
cancelType string The Ionic button type of the Cancel button.
okText string The text for the OK button.
okType string The Ionic button type of the OK button.
「https://www.finddevguides.com/index.php?title=Ionic-js-popup&oldid=4293」から取得
Powered by MediaWiki