Как правильно использовать нг-класс в angularjs?

Question

Как правильно установить ng-class условия? Я перепробовал все, что вижу в inte rnet, но не могу найти ответ.

Это мой код:

<tr ng-class="byitem.Count != byitem.orderedcount ? error : success" 
    ng-repeat="byitem in weekdata">

В основном, все, что я хочу, это когда byitem.count и byitem.orderedcount не совпадают, тогда class будет error в противном случае success.

Но я получаю то, что даже если count и orderedcount такие же, но все равно получает класс ошибки.

Answer 1

просто сделайте css class в вашем .css file. например:

.myClass{
  background: blue;
  height:200px;
  width:200px;
}

, а затем ваш тег html использует ng-класс как:

<div ng-class="{myClass:true}"><div>

здесь вы можете поместить свое условное выражение, например, a == 1 в соответствии с вашими требованиями вместо использования boolean true, как я делал в моем примере.

Answer 2

Я думаю, это то, что вы ожидаете. Я добавил несколько фиктивных данных, чтобы лучше показать, как они могут работать. Вы были очень близки, имена классов должны быть строками, а не переменными, поэтому вокруг них стоит знак ''.

let weekdata = [
  {"Count": 1, "text": "something", "orderedcount": 2},
  {"Count": 6, "text": "something else", "orderedcount": 6},
  {"Count": 5, "text": "something 3", "orderedcount": 2},
  {"Count": 2, "text": "something test", "orderedcount": 2},
];

let app = angular.module('app', []);
app.directive('my', function() {
  return {
    controller: function($scope) {
      $scope.weekdata = weekdata
      
    }
  }
});

.error{
  background-color:red;
}

.success{
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div ng-app="app">
  <table my>
    <tr ng-class="byitem.Count != byitem.orderedcount ? 'error' : 'success'" ng-repeat="byitem in weekdata">
      <td>
          {{byitem.text}}
      </td>
    </tr>
  </table>
</div>