サーチ…


備考

Ionicには、さまざまなJavascript AngularJSエクステンションが用意されています。これらの拡張機能は、通常のフォーム入力からモーダルウィンドウまでのあらゆるものが可能であり、これらの拡張機能を使用して基本アプリケーションのコーディングを大幅に高速化します。

フォーム入力

イオン入力は通常のHTML入力と変わりはありませんが、異なるスタイルになっており、指示として使用されます。また、Ionicアプリで通常のHTML入力を使用することもできます。ここでは、Ionicがすぐに使える基本的な例をいくつか紹介します。

チェックボックス:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

ラジオボタン:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

トグル:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

モーダルウィンドウ

Ionicには、モーダルウィンドウを表示するための独自の拡張機能があります。モーダルは、テンプレートを<script>タグでビューにまっすぐ挿入するか、または別のテンプレートファイルを使用して作成できます。この例では、我々はあなたが名前のhtmlファイル持っていると仮定しているmodal-template.htmlというフォルダにtemplatesfromTemplateUrlしてモーダル初期化関数でテンプレートパスを設定しfromTemplateUrl

スコープ内にモーダルオブジェクトを作成する

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

コントローラ

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

モーダルを制御する

次のコマンドでモーダルを制御することができます。

オープンモーダル

$scope.modal.show();

モーダルを閉じる

$scope.modal.hide();

モーダルを削除

$scope.modal.remove();

モーダルイベント

以下の機能を使ってモーダルイベントを聴くことができます。

モーダルは隠されています

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

モーダルが削除されました

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow