AngularJS 具有扩展的动态样式 class

Question

我正在尝试显示一个状态标签，该标签将包含不同的背景颜色和文本，具体取决于 AngularJs 中的状态（例如 'New' = 绿色，'Active' = 黄色）。我目前有一个 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 中，我引用了多个 class 如下所示

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

是否可以将 class 与 ng-class 结合使用扩展的 classes 或可以通过 ng-style 实现？

Answer 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> 为假

Answer 2

是的，您可以将 class 和 ng-class 应用于同一个元素，如 the reference 所述。唯一要注意的是，当还存在 ng-class 时，避免在 class 属性中使用内插表达式。

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

AngularJS 具有扩展的动态样式 class

AngularJS dynamic styling with extended class

css

angularjs

ng-class

ng-style