Uso di AngularJs "ng-style" all'interno di iterazione "ng-repeat"

Sto cercando di impostare in modo condizionale i colori degli elementi di dati in una tabella in base al loro valore utilizzando ng-style. Ogni riga di dati viene generata utilizzando ng repeat.Uso di AngularJs "ng-style" all'interno di iterazione "ng-repeat"

Così ho qualcosa di simile:

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

e una funzione nel mio controller che fa qualcosa di simile:

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

Ho provato un paio di cose diverse. e persino impostare il colore come attributo di dati nell'oggetto di pagamento, tuttavia sembra che non riesca a ottenere ng-style per elaborare i dati dai binding di dati, Qualcuno sa come posso farlo funzionare? Grazie.

fonte

2013-04-19 Sean Geoffrey Pietz

Non utilizzare {{}} s all'interno di un Angular expression: non una stringa

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

restituiscono un oggetto, dalla vostra funzione:

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

Fiddle

fonte

2013-04-19 19:30:01

uso questo codice

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

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

colore blu per esempio

fonte

2014-09-03 11:07:45

Potrebbe aiutare!

<!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>

fonte

2015-05-21 06:59:46

Uso di AngularJs "ng-style" all'interno di iterazione "ng-repeat"

risposta

Problemi correlati