在"ng-repeat"迭代中使用AngularJs"ng-style"

Question

我想使用ng-style基于它们的值有条件地设置表中数据元素的颜色.使用ng repeat生成每行数据.

所以我有类似的东西:

<tr ng-repeat="payment in payments">
  <td ng-style="set_color({{payment}})">{{payment.number}}</td>

和我的控制器中的功能,如下所示:

$scope.set_color = function (payment) {
  if (payment.number > 50) {
    return '{color: red}'
  }
}

我尝试过几种不同的东西.甚至将颜色设置为支付对象中的数据属性,但似乎我无法从数据绑定中处理数据,有没有人知道我可以使这个工作的方式？谢谢.

Answer 1

不要在Angular表达式中使用{{}} :

<td ng-style="set_color(payment)">{{payment.number}}</td>

从函数中返回一个对象,而不是字符串:

$scope.set_color = function (payment) {
  if (payment.number > 50) {
    return { color: "red" }
  }
}

小提琴

Answer 2

使用此代码

<td style="color:{{payment.number>50?'red':'blue'}}">{{payment.number}}</td>

要么

<td ng-style="{'color':(payment.number>50?'red':'blue')}">{{payment.number}}</td>

例如蓝色