Question

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

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

一种简单的方法可能是为学生创建两个单独的数组，然后根据我们所针对的数组应用样式，但如果我想保存一些空间并将所有内容保存在一个数组中，是否有办法这样做？

以下是一些代码：

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

_users是我在相应的TypeScript文件中创建的数组。我会说些什么吗，

如果（[users] .firstName =='John'）从.less文件中应用johnStyles

我可以澄清是否需要。

Answer 1

对于Angular 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

对于Angular＆gt; = 2.0

API似乎几乎保持不变：

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

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

1 个答案:

对于Angular 1.x

对于Angular＆gt; = 2.0