Использование стиля ng AngularJs в итерации ng-repeat

Я пытаюсь условно установить цвета элементов данных в таблице на основе их значения, используя стиль ng. Каждая строка данных генерируется с использованием повторения ng.

Итак, у меня есть что-то вроде:

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

и функция в моем контроллере, которая делает что-то вроде:

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

Я пробовал несколько разных вещей. и даже установить цвет в качестве атрибута данных в объекте платежа, однако, похоже, я не могу заставить ng-стиль обрабатывать данные из привязок данных. Кто-нибудь знает, как я могу заставить это работать? Спасибо.


angularjs angularjs-ng-repeat ng-style
person Sean Geoffrey Pietz    schedule 19.04.2013    source источник

Ответы (3)


arrow_upward
95
arrow_downward

Не используйте {{}} внутри выражения Angular:

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

Верните объект, а не строку, из вашей функции:

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

Скрипка

person Mark Rajcok    schedule 19.04.2013

arrow_upward
21
arrow_downward

используйте этот код

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

or

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

синий цвет например

person Behnam Mohammadi    schedule 03.09.2014

arrow_upward
3
arrow_downward

Это может помочь вам!

<!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>
person Anil Singh    schedule 21.05.2015