"ng-repeat"繰り返しでAngularJs "ng-style"を使用する

ng-styleを使用して、テーブルのデータ要素の色を条件に基づいて設定します。データの各行は、ng repeatを使用して生成されています。"ng-repeat"繰り返しでAngularJs "ng-style"を使用する

<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を得ることはできないようです。誰でもこの作業を行う方法を知っていますか？ありがとう。

出典

2013-04-19 Sean Geoffrey Pietz

Angular expression内{{}} Sを使用しないでください：

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

戻りオブジェクトではなく、あなたの関数から文字列、：

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

Fiddle

出典

2013-04-19 19:30:01

これを使用しますコード

<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-03 11:07:45

の青色それはあなたを助けるかもしれません！

<!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-21 06:59:46

"ng-repeat"繰り返しでAngularJs "ng-style"を使用する

答えて

関連する問題