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

Posted 2023-03-06

【中文标题】AngularJS - 选中时使用 ng-style 设置单选按钮标签的颜色

【英文标题】：AngularJS - Use ng-style to set color of radio button label when checked

【发布时间】：2017-12-26 09:02:32

【问题描述】：

我知道如何使用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 样式属性？

【问题讨论】：

你能发个codepen吗？

你也可以使用 ng-class..

ngstyle 使用内联样式，所以这是不可能的。改用 ng-class

【参考方案1】：

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

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

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

好的，这有点过时了，但你可以做到这一点。如果在您的 index.html 页面上，您已经在文档级别（在 html 标记上）加载了您的应用程序，您实际上可以有一个带有控制器的部分并使用控制器引用定义 css，因此您可以为收音机动态设置颜色-button:checked+label 这样。

【讨论】：

我想知道如何通过ng-style 访问:checked+label 样式属性？

我认为你根本不需要 ng-style。这似乎是你应该能够用直接的 css 来做的事情。我不会尝试将 ng-style 与 css 类混合使用。似乎只使用 ng-class 会更直接。

但问题是，使用纯 css 类我无法使颜色动态化，而使用 ng-style 我可以

好的。不确定你可以在那里绑定 :checked+label ，但使用控制器方法应该会给你同样的结果。

更新了答案。在我开始使用 Angular Material 之前，我在一个应用上做了类似的事情。