Come posso inserire il testo all'interno di uno ione-ginocchiera

Question

attuale ho un ionico ginocchiera che assomiglia a questo

io voglio fare questo

C'è comunque per far si che questo accada? Ho letto da qualche parte che potrei usare ng-true-value e ng-false-value ma questo non sembra fare quello che sto cercando

Answer 1

Gli attributi ng-true-value e ng-false-value devono fornire all'espressione ng-model un determinato valore personalizzato quando la casella di controllo è selezionata. Il framework ionico non lo utilizza per visualizzare il testo nel commutatore.

ma è certamente possibile :)

Qui di seguito è una direttiva che fa. Slap ion-toggle-text su qualsiasi ion-toggle esistente e sei a posto. Il testo on/off può essere impostato con gli attributi ng-true-value/ng-false-value o con un valore separato ; con l'attributo ion-toggle-text. Se non viene fornito alcun testo, il valore predefinito è "su" & "off".

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

Plunk può essere trovato here.

Divertiti.

Answer 2

Guardando attraverso il source code, questo non sembra essere possibile. Da notare che non ci sono opzioni per attaccare il testo nel pulsante di attivazione e l'unico tag di esclusione non è correlato al pulsante di attivazione. Ovviamente puoi forgiare il codice e farlo da solo, ma non penso che ne valga la pena.

Answer 3

Ho provato anche questo senza alcun successo la mia soluzione più vicina stava mettendo un sì testo no/sul lato sinistro del pulsante di commutazione in questo modo:

link per esempio di codice : http://play.ionic.io/app/f3ad6568b33c

Il codice attuale: 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: // Questo è un var all'interno del 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; 
    } 

Answer 4

ho aggiornato la soluzione delineata nella risposta per sostenere ionico 1.0.3. Il Plunker può essere trovato here

HTML L'esempio seguente mostra anche l'utilizzo della proprietà disabilitata.

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