angleJSを使用してIONICのラジオボタンの子のスタイルを変更する方法

Question

<ion-list radio-group> 
    <ion-radio name="choiceLng" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio> 
    <ion-radio name="choiceLng" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio> 
</ion-list> 

ion-listを使用してラジオボタンを作成しました。 ion-radioの子供のスタイルを変更したいのですが、これはinputタグとdivです。このinputタグにどのように「到達」してから、angularJsを使用してCSSを動的に変更できますか？

Answer 1

すべてion-radio要素にdefaultクラスを持つことができます。そして、適切なCSSセレクタで、あなたは、あなたはそのラベルタグにselectedを言うng-classを利用すると、特定のクラスを適用するには、そのNG-値とngModel言語の値を確認することができます

.default .item-content { 
// To add style to content label along with its background 
} 
.default .radio-icon { 
// To add style to content label tick icon (or to modify it when not shown) 
} 

のようにそのコンテンツのスタイルを追加することができます。

今ここにあなたがなるようにNG-クラスあまりにもすべてのオプションを追加する必要がありますが、それにNGリピートを使用している場合、それはよイオンラジオ静的を使用している

<ion-list radio-group> 
    <ion-radio name="choiceLng" ng-class="{'selected': language === 'y'}" ng-model="language" value="y" ng-value="'y'" ng-change="langChanged('y')">y</ion-radio> 
    <ion-radio name="choiceLng" ng-class="{'selected': language === 'x'}" ng-model="language" value="x" ng-value="'x'" ng-change="langChanged('x')">x</ion-radio> 
</ion-list> 

を次のようにあなたのケースでは、それはですモデルを数値変数と比較するだけで一度だけです。

.selected .item-content { 
// To add style to selected content label along with its background 
} 
.selected .radio-icon { 
// To add style to selected content label tick icon (or to modify it) 
} 

参照するCodepen例の作業：あなたは同じように、その内容のためのCSSを持つことができますので、 に沿ってモデルチェンジと後selectedクラスのみが選択されたラジオオプションに追加されます。