如何使用angularJS更改IONIC中单选按钮子项的样式答案

【问题标题】：How to change style for radio button childs in IONIC using angularJS如何使用angularJS更改IONIC中单选按钮子项的样式
【发布时间】：2018-04-17 23:58:18
【问题描述】：

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

【问题讨论】：

标签： css angularjs ionic-framework

【解决方案1】：

您可以在所有 ion-radio 元素上使用 default 类。然后使用适当的 CSS 选择器，您可以为其内容添加样式，例如

.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-class 并检查 ngModel 语言的值及其 ng-value 以将特定类例如 selected 应用于该标签标签。你的情况如下

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

现在您在这里使用 ion-radio static，因此每个选项都需要添加 ng-class，但如果您在其上使用 ng-repeat，则只需将模型与 ng-value 进行比较多变的。随着模型更改selected 类将添加到仅选定的单选选项中，因此您可以以相同的方式为其内容添加 CSS：

.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示例参考。

【讨论】：

【解决方案2】：

如果您不想添加其他类，可以将其添加到您的 ionic.app.scss 文件中：

label.item.item-radio.ng-valid
  border-radius: 400px
  margin: 5px 50px 5px 10px

【讨论】：