在“ng-repeat”迭代中使用 AngularJs“ng-style”答案

【问题标题】：Using AngularJs "ng-style" within "ng-repeat" iteration在“ng-repeat”迭代中使用 AngularJs“ng-style”
【发布时间】：2015-08-15 07:29:15
【问题描述】：

我正在尝试使用 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}'
  }
}

我尝试了几种不同的方法。甚至将颜色设置为支付对象中的数据属性，但似乎我无法获得 ng-style 来处理来自数据绑定的数据，有谁知道我可以使这项工作的方法吗？谢谢。

【问题讨论】：

标签： angularjs angularjs-ng-repeat ng-style

【解决方案1】：

不要在 Angular expression 中使用 {{}}：

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

从您的函数返回一个对象，而不是字符串：

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

Fiddle

【讨论】：

【解决方案2】：

使用此代码

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

或

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

例如蓝色

【讨论】：

【解决方案3】：

也许对你有帮助！

<!DOCTYPE html>
<html>

<head>
  <style>
    .yelloColor {
      background-color: gray;
    }
    .meterColor {
      background-color: green;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>
    var app = angular.module('ngStyleApp', []);
    app.controller('ngStyleCtrl', function($scope) {
      $scope.bar = "48%";
    });
  </script>
</head>

<body ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
  <div class="yelloColor">
    <div class="meterColor" ng-style="{'width':bar}">
      <h4> {{bar}} DATA USED OF 100%</h4>
    </div>
  </div>
</body>

</html>

【讨论】：