基于数组元素应用多种样式

Question

我目前正在创建一个活动和非活动用户的数组，并且想知道是否可以根据所述用户是否处于活动状态来对表中的特定行进行样式设置。

您可以将样式附加到Angular中的数组吗？例如，假设我从学生数据库中检索数据，并根据它们是否处于活动状态或非活动状态，我可以将该样式应用到该行中。

一个简单的方法可能是为学生创造两个独立的数组，然后根据其阵列我们正在瞄准，但应用的样式，如果我想节省一些空间，把一切都在一个阵列中，会有办法这样做？

下面是一些代码：

<user-table [loadingError]="_loadingError" 
    [loading]="_loadingUsers" 
    [users]="_users"> 
</user-table> 

_users是我在相应的文件打字稿创建阵列。请问我可以这样说，

如果（[用户] .firstName == '约翰'）从.LESS文件应用johnStyles

我可以澄清如果需要的话。

Answer 1

对于角度的1.x

的ng-class指令允许动态地添加类元素。 ng-style对于内联css样式也是如此。

.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app 
 
    ng-init='users = [{name: "John", active: true}, {name: "Peter", active: false}]' 
 
> 
 
    <div 
 
    ng-repeat='u in users' 
 
    ng-class='{ active: u.active }' 
 
    ng-style='{ color: u.active && "white" }' 
 
    >{{ u.name }}</div> 
 
</div>

https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngStyle

对于角> = 2.0

该API似乎保持几乎相同的：

https://angular.io/api/common/NgClass
https://angular.io/api/common/NgStyle