Używanie AngularJs "w stylu ng" wewnątrz "ng-repeat" iteracja

Tring do warunkowego ustawienia kolorów elementów danych w tabeli na podstawie ich wartości za pomocą stylu ng. Każdy wiersz danych jest generowany przy użyciu powtórzenia ng.Używanie AngularJs "w stylu ng" wewnątrz "ng-repeat" iteracja

więc mam coś takiego:

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

i funkcję w moim kontrolera, który robi coś takiego:

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

Próbowałem kilka różnych rzeczy. a nawet ustawić kolor jako atrybut danych w obiekcie płatności, jednak wydaje się, że nie mogę uzyskać stylu ng do przetwarzania danych z powiązań danych, Czy ktoś może wiedzieć, w jaki sposób mogę wykonać tę pracę? Dzięki.

Źródło

2013-04-19 Sean Geoffrey Pietz

Nie używać {{}} s wewnątrz Angular expression:

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

zwróci przedmiot, a nie łańcucha, z funkcją:

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

Fiddle

Źródło

2013-04-19 19:30:01

stosowanie tego kod

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

lub

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

niebieski kolor na przykład

Źródło

2014-09-03 11:07:45

To może Ci pomóc!

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

Źródło

2015-05-21 06:59:46

Używanie AngularJs "w stylu ng" wewnątrz "ng-repeat" iteracja

Odpowiedz

Powiązane problemy