带有扩展类的 AngularJS 动态样式

Posted 2023-03-06

【中文标题】带有扩展类的 AngularJS 动态样式

【英文标题】：AngularJS dynamic styling with extended class

【发布时间】：2018-07-08 05:53:48

【问题描述】：

我正在尝试显示一个状态标签，该标签将包含不同的背景颜色和文本，具体取决于 AngularJs 中的状态（例如，“新”= 绿色，“活动”= 黄色）。我目前有一个带有

的 css 文件

.status 
    padding: 4px 8px;
    font-size: 12px;
    line-height: 12px;
    color: white;
    border-radius: 16px;


.status.new 
    background-color: #673AB7;
    border: 1pt solid #673AB7;


.status.active 
    background-color: #4CAF50;
    border: 1pt solid #4CAF50;

在我的 html 中，我引用了多个类，如下所示

<span class="status pull-right">statusProperty</span>

是否可以将 class 与 ng-class 结合使用扩展类，或者可以通过 ng-style 来实现？

【参考方案1】：

是的，您可以使用 ng-class 和 class

你的情况是这样的：

<span class="status pull-right" ng-class="'new': <condition_for_being_green>, 'active': <condition_for_being_yelow>">statusProperty</span>

这将使您的元素通过class 属性具有status 和pull-right 类，并在分别满足绿色和黄色条件时具有new | active 类。

这意味着元素将具有类

status pull-right new 如果<condition_for_being_green> 为真 status pull-right active 如果<condition_for_being_yellow> 为真 status pull-right new active 如果<condition_for_being_green> 和<condition_for_being_yellow> 为真 status pull-right 如果<condition_for_being_green> 和<condition_for_being_yellow> 为假

【参考方案2】：

是的，您可以将class 和ng-class 应用于同一元素，如the reference 状态。唯一要注意的是，当 ng-class 也存在时，避免在 class 属性中插入表达式。

此外，考虑到可重用性和您已经编写了所需类的事实，使用 CSS 类而不是内联样式当然更好。