在“ng-repeat”迭代中使用AngularJs“ng-style”
我正在使用ng-style来根据它们的值有条件地设置表中数据元素的颜色。 每一行数据都是用ng重复生成的。
所以我有这样的东西：
<tr ng-repeat="payment in payments"> <td ng-style="set_color({{payment}})">{{payment.number}}</td> 和我的控制器中的一个function，做如下：
$scope.set_color = function (payment) { if (payment.number > 50) { return '{color: red}' } }
我尝试了一些不同的东西。 甚至将颜色设置为支付对象中的数据属性，但是看起来我无法获得ng-style来处理来自数据绑定的数据，有没有人知道我能做到这一点的方法？ 谢谢。
不要在Angularexpression式中使用{{}}：
<td ng-style="set_color(payment)">{{payment.number}}</td>
从函数中返回一个对象，而不是一个string：
$scope.set_color = function (payment) { if (payment.number > 50) { return { color: "red" } } }
小提琴
使用这个代码
<td style="color:{{payment.number>50?'red':'blue'}}">{{payment.number}}</td>
要么
<td ng-style="{'color':(payment.number>50?'red':'blue')}">{{payment.number}}</td>
蓝色为例
它可能会帮助你！
<!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>
