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。我怎样才能达到＆＃34;这个{{1}}标签，然后使用angularJs动态更改css？

Answer 1

您可以在所有default元素上使用ion-radio课程。然后使用适当的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值，以将特定类别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>

现在你在使用离子无线电静态，所以需要在每个选项中添加ng-class，但是如果你在它上面使用ng-repeat，那么只需要将模型与ng值进行比较变量。在模型更改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 示例进行推荐。

Answer 2

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

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

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

2 个答案: