webentwicklung-frage-antwort-db.com.de

Wie kann ich Text in einen Ionenumschalter setzen?

Strom Ich habe einen Ionenumschalter, der so aussieht

enter image description here

Ich möchte das machen 

enter image description here

Gibt es überhaupt etwas, das dies ermöglicht? Ich habe irgendwo gelesen, dass ich ng-true-value und ng-false-value verwenden könnte, aber das scheint nicht zu tun, was ich suche

javascripthtmlangularjstoggleionic
12
esastincy

Die Attribute ng-true-value und ng-false-value geben dem ng-model-Ausdruck einen bestimmten benutzerdefinierten Wert, wenn das Kontrollkästchen aktiviert ist. Das ionic - Framework verwendet es nicht, um Text im Toggle anzuzeigen.

Aber es ist durchaus möglich :)

Unten ist eine Anweisung, die dies tut. Schlagen Sie ion-toggle-text auf jeden vorhandenen ion-toggle und schon kann es losgehen. Ein/Aus-Text kann entweder mit den Attributen ng-true-value/ng-false-value oder mit einem durch ; getrennten Wert mit dem Attribut ion-toggle-text festgelegt werden. Wenn kein Text angegeben ist, wird standardmäßig " ein " & " aus " verwendet.

<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 finden Sie hier .

Genießen.

19
null

Ich habe dies auch ohne Erfolg versucht. Meine nächste Lösung bestand darin, einen Nein/Ja-Text auf der linken Seite des Umschaltknopfes wie folgt zu platzieren:

 enter image description here

 enter image description here

Link zum Codebeispiel: http://play.ionic.io/app/f3ad6568b33c

Der tatsächliche 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: // Dies ist eine Variable in meinem Controller $ Scope.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;
  }
2
CommonSenseCode

Ein Blick in den Quellcode scheint nicht möglich zu sein. Es ist zu beachten, dass es keine Optionen gibt, um Text in die Umschaltschaltfläche einzufügen, und das einzige Transclude-Tag bezieht sich auch nicht auf die Umschaltfläche. Sie können natürlich ihren Code selbst festlegen, aber ich denke nicht, dass es sich lohnt.

1
David Grinberg

Ich habe die in der Antwort beschriebene Lösung aktualisiert, um Ionic 1.0.3 zu unterstützen. Den Plunker finden Sie hier

Das HTML-Beispiel unten zeigt auch die Verwendung der Eigenschaft ng-disabled.

  <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>
0
zebra1024