时间戳

首页 > 解决方案 > 如何在 angularjs 中正确使用 ng-class？

html - 如何在 angularjs 中正确使用 ng-class？

问题描述

如何正确设置ng-class条件？我已经尝试了我在互联网上看到的所有内容，但似乎找不到答案。

这是我的代码： 

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

基本上，我想要的只是任何时候byitem.count，byitem.orderedcount并且不一样，否则class将是。errorsuccess

但我得到的是，即使countandorderedcount相同，它仍然会得到错误类。

标签： htmlangularjs

解决方案

我认为这是你所期望的。我添加了一些虚拟数据来更好地展示它是如何工作的。你非常接近，类名需要是字符串而不是变量，因此它们周围的 ' ' 标记。

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>

推荐阅读