Ток у меня есть ионный переключатель, который выглядит так
Я хочу сделать это
В любом случае, чтобы это произошло? Я где-то читал, что могу использовать ng-true-value и ng-false-value, но, похоже, не выполняет то, что я ищу.
Ток у меня есть ионный переключатель, который выглядит так
Я хочу сделать это
В любом случае, чтобы это произошло? Я где-то читал, что могу использовать ng-true-value и ng-false-value, но, похоже, не выполняет то, что я ищу.
Атрибуты ng-true-value
и ng-false-value
должны предоставлять выражение ng-model
определенное пользовательское значение, когда флажок установлен. Ионная структура не использует его для отображения текста в переключателе.
Но это, безусловно, возможно:)
Ниже приведена директива. Slap ion-toggle-text
для любого существующего ion-toggle
, и вам хорошо идти. Текст вкл/выкл может быть установлен с помощью атрибутов ng-true-value
/ng-false-value
или с выделенным значением ;
с помощью атрибута ion-toggle-text
. Если текст не указан, он по умолчанию равен "on" и "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>
Пункер можно найти здесь.
Enjoy.
Я также пробовал это без каких-либо успехов, мое ближайшее решение помещало текст no/yes в левой части кнопки переключения:
Ссылка на образец кода: 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>
JS: // Это переменная внутри моего контроллера $ 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;
}
Просматривая исходный код, это не представляется возможным. Следует отметить, что нет никаких вариантов для вставки текста в кнопку переключения, и единственный тег transclude также не относится к кнопке переключения. Вы можете, конечно, развить свой код и сделать это сами, но я не думаю, что это того стоит.
Я обновил решение, изложенное в ответе на поддержку Ionic 1.0.3. Plunker можно найти здесь
HTML Пример ниже показывает также свойство 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>