web-dev-qa-db-fra.com

Utilisation de AngularJs "ng-style" dans l'itération "ng-repeat"

Je suis en train de définir de manière conditionnelle les couleurs des éléments de données dans un tableau en fonction de leur valeur en utilisant le style ng. Chaque ligne de données est générée à l'aide de ng repeat.

J'ai donc quelque chose comme:

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

et une fonction dans mon contrôleur qui fait quelque chose comme:

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

J'ai essayé deux ou trois choses différentes. et même définir la couleur en tant qu'attribut de données dans l'objet de paiement, mais il semble que je ne puisse pas obtenir le style ng pour traiter les données des liaisons de données, quelqu'un sait-il comment je pourrais faire fonctionner cela? Merci.

angularjsangularjs-ng-repeatng-style
37
Sean Geoffrey Pietz

N'utilisez pas de {{}} s à l'intérieur d'un expression angulaire :

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

Renvoyez un objet, pas une chaîne, à partir de votre fonction:

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

Violon

95
Mark Rajcok

utilisez ce code

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

ou

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

couleur bleue par exemple

21
Behnam Mohammadi

Cela pourrait vous aider!

<!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>
3
Anil Singh