基於數組元素應用多種樣式

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