ionic-framework
Extensions ioniques AngularJS

Remarques

Formulaire de saisie

Les entrées ioniques ne sont pas différentes des entrées HTML normales, mais elles sont conçues différemment et utilisées comme une directive. Vous pouvez également utiliser des entrées HTML normales dans les applications ioniques. Voici quelques exemples de base que Ionic propose prêt à l'emploi.

Case à cocher:

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

Bouton radio:

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

Basculer:

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

Fenêtres modales

Ionic a sa propre extension pour afficher une fenêtre modale. Les modaux peuvent être créés en insérant le modèle directement dans la vue avec une <script> ou en utilisant un fichier de modèle distinct. Dans cet exemple, nous supposons que vous avez un fichier HTML nommé modal-template.html dans un dossier appelé templates . Vous définissez le chemin du modèle dans la fonction d'initialisation modale avec fromTemplateUrl .

Création de l'objet modal dans la portée

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> 

Manette

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

Contrôler le modal

Vous pouvez alors contrôler le modal avec les commandes suivantes.

Modal ouvert

$scope.modal.show();

Fermer modal

$scope.modal.hide();

Supprimer modal

$scope.modal.remove();

Événements modaux

Vous pouvez écouter des événements modaux avec les fonctions suivantes.

Le modal est caché

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

Le modal est supprimé

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