web-dev-qa-db-ja.com

イオントグル内にテキストを配置するにはどうすればよいですか

現在私はこのようなイオントグルを持っています

enter image description here

これをやりたい

enter image description here

とにかくこれを実現する方法はありますか？ ng-true-valueとng-false-valueを使用できる場所を読みましたが、それは私が探しているものを実行していないようです

javascripthtmlangularjstoggleionic
13
esastincy

属性ng-true-valueおよびng-false-valueは、チェックボックスがオンになっているときにng-model式に特定のカスタム値を提供するためのものです。 ionicフレームワークは、トグルでテキストを表示するためにそれを使用しません。

しかし、それは確かに可能です:)

以下はそうする指令です。既存の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>

プランカーは見つけることができます ここ 。

楽しい。

21
null

私もこれを試してみましたが、成功しませんでした。最も近い解決策は、次のようにトグルボタンの左側にno/yesテキストを配置することでした。

enter image description here

enter image description here

コードサンプルへのリンク： 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;
  }
2
CommonSenseCode

ソースコード を見ると、これは不可能のようです。トグルボタンにテキストを貼り付けるオプションはなく、唯一のトランスクルージョンタグもトグルボタンに関連していないことに注意してください。もちろん、彼らのコードをフォークして自分で行うことはできますが、それだけの価値はないと思います。

1
David says Reinstate Monica

Ionic 1.0.3。Plunkerが見つかります here

以下の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>
0
zebra1024