मैं एक आयन टॉगल के अंदर का पाठ जगह कर सकते हैं कैसे

Question

वर्तमान मैं एक आयन टॉगल है कि इस

मैं इस

क्या करना चाहते हैं की तरह लग रहा है वहाँ वैसे भी है ऐसा करने के लिए? मैंने कहीं पढ़ा है, मैं ng-true-value और ng-false-value का उपयोग कर सकता हूं लेकिन ऐसा लगता है कि मैं

Answer 1

गुण ng-true-value और ng-false-value चेकबॉक्स चेक होने पर ng-model अभिव्यक्ति को एक निश्चित कस्टम मान प्रदान करना है। आयनिक ढांचे टॉगल में पाठ प्रदर्शित करने के लिए इसका इस्तेमाल नहीं करता है।

लेकिन यह निश्चित रूप से संभव है :)

नीचे एक निर्देश है कि करता है। किसी मौजूदा ion-toggle पर ion-toggle-text स्लैप करें और आप जाने के लिए अच्छे हैं। पर/बंद पाठ या तो ng-true-value/ng-false-value विशेषताओं के साथ या ion-toggle-text विशेषता के साथ एक ; अलग मान के साथ सेट किया जा सकता। कोई पाठ यह " बंद " & " पर " डिफ़ॉल्ट रूप से प्रदान की जाती है।

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

प्लंकर here पाया जा सकता है।

का आनंद लें।

Answer 2

source code के माध्यम से देख रहा हूं, ऐसा प्रतीत नहीं होता है। ध्यान दें कि टॉगल बटन में टेक्स्ट चिपकाने के लिए कोई विकल्प नहीं है, और केवल एकमात्र ट्रांसफर टैग टॉगल बटन से संबंधित नहीं है। आप निश्चित रूप से अपने कोड कांटा कर सकते हैं और इसे स्वयं कर सकते हैं, लेकिन मुझे लगता है कि यह इसके लायक नहीं है।

Answer 3

मैं भी किसी भी सफलता के बिना इस कोशिश की मेरी निकटतम समाधान इस तरह टॉगल बटन के बाईं ओर पर एक नहीं/हाँ पाठ रखने गया था:

कोड नमूने के लिए लिंक : http://play.ionic.io/app/f3ad6568b33c

वास्तविक कोड: 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> 

जेएस: // यह मेरे नियंत्रक $ scope.customText = false के अंदर एक var है;

सीएसएस:

#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

मैं समाधान जवाब में उल्लिखित आयोनिक 1.0.3 का समर्थन करने के लिए अद्यतन। Plunker भी एनजी-विकलांग संपत्ति का उपयोग कर नीचे दिया here

एचटीएमएल उदाहरण पाया जा सकता है।

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