css - 如何使用angularJS更改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 创建了单选按钮。我想改变 children 的风格ion-radio 是 input 标签和 div。我怎样才能“到达”这个 input 标签，然后使用 angularJs 动态更改 css？

Answer 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 并使用其 ng-value 检查 ngModel 语言的值，以将特定类(例如 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 引用示例。