37

ng-style を使用して、値に基づいてテーブル内のデータ要素の色を条件付きで設定しようとしています。データの各行は、ng の繰り返しを使用して生成されています。

だから私は次のようなものを持っています:

<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 を取得できないようです。これを機能させる方法を知っている人はいますか? ありがとう。

4

3 に答える 3

95

Angular 式内で {{}} を使用しないでください。

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

関数から文字列ではなくオブジェクトを返します。

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

フィドル

于 2013-04-19T19:30:01.283 に答える
21

このコードを使用してください

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

また

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

例えば青色

于 2014-09-03T11:07:45.970 に答える
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>
于 2015-05-21T06:59:46.317 に答える