javascript - AngularJS - 使用 ng-style 设置选中时单选按钮标签的颜色

Question

我知道如何使用 ng-style 设置单选按钮标签的颜色，如下所示:

ng-style="{'background-color': buttonColor}"

但是，当使用 ng-style 指令检查时，如何更改单选按钮标签的颜色？在 css 中是这样的:

.radio-button:checked+label {
    background-color: #52b6db;
    border: 1px solid #52b6db;
}

编辑:基本上，我如何通过 ng-style 使用 :checked+label 样式属性？

Answer 1

基本上是在 Controller 中为 ng-style 调用一个函数，并根据按钮的值返回适当的样式对象。

ng-style="$ctrl.getStyle()"

function getStyle() {
if (some condition) {
    return {
        background-color: #52b6db;
        border: 1px solid #52b6db;
} else {
    return {...}
}

好吧，这有点离谱，但你可以做到。如果在您的 index.html 页面上您已经在文档级别(在 html 标签上)加载了您的应用程序，您实际上可以有一个带有 Controller 的部分并使用 Controller 引用定义 css，因此您可以动态设置 radio 的颜色-button:checked+label 这样。