angularjs - ngstyle - ng-style conditional
Usando AngularJs "ng-style" dentro de la iteración "ng-repeat" (3)
Estoy tratando de establecer condicionalmente los colores de los elementos de datos en una tabla en función de su valor utilizando ng-style. Cada fila de datos se genera utilizando ng repeat.
Entonces tengo algo como:
<tr ng-repeat="payment in payments">
<td ng-style="set_color({{payment}})">{{payment.number}}</td>
y una función en mi controlador que hace algo como:
$scope.set_color = function (payment) {
if (payment.number > 50) {
return ''{color: red}''
}
}
He intentado un par de cosas diferentes. e incluso establecer el color como un atributo de datos en el objeto de pago, sin embargo, parece que no puedo obtener el estilo ng para procesar los datos de los enlaces de datos. ¿Alguien sabe de qué manera podría hacer que esto funcione? Gracias.
¡Puede ser que te ayude!
<!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>
No use {{}} s dentro de una expresión angular :
<td ng-style="set_color(payment)">{{payment.number}}</td>
Devuelve un objeto, no una cadena, de tu función:
$scope.set_color = function (payment) {
if (payment.number > 50) {
return { color: "red" }
}
}
usa este código
<td style="color:{{payment.number>50?''red'':''blue''}}">{{payment.number}}</td>
o
<td ng-style="{''color'':(payment.number>50?''red'':''blue'')}">{{payment.number}}</td>
color azul por ejemplo