Comment puis-je placer le texte à l'intérieur d'un ion-bascule

Actuelle j'ai une ion-bascule qui ressemble à ceci

Comment puis-je placer le texte à l'intérieur d'un ion-bascule

Je veux faire ce

Comment puis-je placer le texte à l'intérieur d'un ion-bascule

Est-il de toute façon pour que cela se produise? J'ai lu quelque part que je pouvais utiliser ng-vrai-valeur et ng-faux-valeur, mais qui n'a pas l'air de faire ce que je suis à la recherche d'

Où as-tu trouvé cette photo (ou avez-vous le faire vous-même)? Peut-être que l'on peut inverser l'ingénieur.
Mon concepteur de fait. Je ne sais pas si c'est possible ou pas

OriginalL'auteur esastincy | 2015-03-26

  1. 18

    Les attributs ng-true-value et ng-false-value à fournir à la ng-model expression d'une certaine valeur personnalisée lorsque la case est cochée. Le ionique cadre n'a pas l'utiliser pour afficher du texte dans la bascule.

    Mais il est certainement possible 🙂

    Ci-dessous est une directive qui n'. Slap ion-toggle-text sur les ion-toggle et vous êtes bon pour aller. On/off texte peut être définie avec le ng-true-value/ng-false-value attributs ou avec un ; séparés de la valeur avec le ion-toggle-text attribut. Si aucun texte n'est fournie, elle est par défaut "sur" & "hors".

    <ion-toggle ion-toggle-text ng-model="simple">
  Simple Example: <b>{{ simple || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text="online;offline" ng-model="customText">
  Custom text: <b>{{ customText || false }}</b>
</ion-toggle>

<ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
  Text by value: <b>{{ textByValue || 'so false' }}</b>
</ion-toggle>

    Plunker peut être trouvé ici.

    Profiter.

    Hey null (lol) tkx pour la réponse complète =D
    C'est génial! Mais à noter qu'avec le courant Ionique (1.3.3) la bascule de ne plus s'anime pour une raison quelconque (qu'il ne si vous supprimez le ion-bascule-texte de la directive).

    OriginalL'auteur null

  2. 2

    J'ai aussi essayé, sans succès, mon plus proche de la solution a été de placer un non/oui texte sur le côté gauche de la bascule bouton comme ceci:

    Comment puis-je placer le texte à l'intérieur d'un ion-bascule

    Comment puis-je placer le texte à l'intérieur d'un ion-bascule

    Lien pour l'échantillon de code: http://play.ionic.io/app/f3ad6568b33c

    Le code:
    HTML:

        <div class="toggle-wrapper">
        <span class="toggle-question">Text question here?</span>
        <ion-toggle class="meds-toggle"
                    toggle-class="toggle-energized"
                    ng-model="customText"
                    ng-checked="customText">
          <div class="toggle-text">{{customText ? "YES" : "NO"}}</div>
        </ion-toggle>

  </div>

    JS:
    //Ceci est une var à l'intérieur de mon contrôleur
    $champ d'application.customText = false;

    CSS:

    #meds-refund-form .toggle-wrapper {
  display: inline-block;
  width: 100%;
  margin-bottom: -20px;

}

  .toggle-question {
    font-size: $default-font-size -3;
    float: left;
    margin: 10px;
  }

    .toggle-text {
    width: 10%;
    color: $bright-yellow;

  }

    .meds-toggle {
    margin: 10px;
    width: 5%;
    float: right;
    border: none;
    height: 50px;
  }
    J'ai juste compris mon code il n'y a pas besoin de downvoted quand je suis peut être utile
    Ajout d'un lien vers votre code n'est pas utile. Maintenant que vous avez ajouté votre code de la réponse elle-même, j'ai supprimé mon downvote
    Mc Codington, hi.. pouvez-vous pls laissez-moi savoir comment atteindre cet objectif dans ionic2 maintenant?

    OriginalL'auteur commonSenseCode

  3. 1

    À la recherche par le biais de la le code source, cela ne semble pas être possible. De plus, il n'y a pas d'options pour le collage de texte dans le bouton à bascule, et la seule transclude étiquette ne porte pas sur le bouton de basculement. Vous pouvez bien sûr fourche de leur code et de le faire vous-même, mais je ne pense pas que sa vaut le coup.

    OriginalL'auteur David Grinberg

  4. 0

    J'ai mis à jour la solution décrite dans la réponse à l'appui Ionique 1.0.3. Le Plunker peut être trouvé ici

    Exemple de code HTML ci-dessous illustre l'utilisation de ng-désactivé bien aussi.

      <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
    Disabled Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text="online;offline"  ng-model="customText" toggle-class="toggle-my-theme">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  <ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
    salut.. pouvez-vous pls laissez-moi savoir comment atteindre cet objectif dans ionic2 maintenant?
    avez-vous trouvé la même solution pour Ionic2? Je veux la même fonction Ionique-3. merci
    Pas de. Je n'ai pas. Désolé, ne pouvait pas être d'une grande aide.

    OriginalL'auteur zebra1024