Как разместить текст внутри переключателя иона

Ток у меня есть ионный переключатель, который выглядит так

Я хочу сделать это

В любом случае, чтобы это произошло? Я где-то читал, что могу использовать ng-true-value и ng-false-value, но, похоже, не выполняет то, что я ищу.

Ответ 1

Атрибуты 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.

Ответ 2

Я также пробовал это без каких-либо успехов, мое ближайшее решение помещало текст 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;
  }

Ответ 3

Просматривая исходный код, это не представляется возможным. Следует отметить, что нет никаких вариантов для вставки текста в кнопку переключения, и единственный тег transclude также не относится к кнопке переключения. Вы можете, конечно, развить свой код и сделать это сами, но я не думаю, что это того стоит.

Ответ 4

Я обновил решение, изложенное в ответе на поддержку 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>