HTML

<td class="text-center col-md-1"
    ng-class="{'redCell': vivier.value1/vivier.value2<1}" >
    {{vivier.value1/vivier.value2}}
</td>

CSS

.redCell {
    background-color: red;
}

你知道为什么吗？

Answer 1

您最好尝试这样：

<td class="text-center col-md-1" ng-class="{(vivier.value1/vivier.value2)<1 ? 'redCell' : 'normalCell'}" >{{vivier.value1/vivier.value2}}</td>

Answer 2

您可以使用ng-style代替ng-class：

<td class="text-center col-md-1" ng-style="yourStyle">{{vivier.value1/vivier.value2}}</td>

然后在JS文件中

yourStyle = {"background-color": "red"}

这只是一个示例。您可以根据需要更改任何值。

Answer 3

尝试一下

<td  class="text-center col-md-1" ng-class="{{vivier.value1/vivier.value2 < 1}}?'redCell':'otherCell'"> {{vivier.value1/vivier.value2 < 1}}</td>

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope, $http){

 $scope.vivier = {'value1': 4,'value2': 2};
  $scope.test ="test";
});

.redCell {
    background-color: red;
}
.otherCell{
  background-color:yellow;
  
}

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="MyApp" >
<head>
  <meta charset="utf-8">
  <title>HHS - Problems</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!--<script src="scripts/bundle.public.min.js" type="text/javascript"></script>-->
  <!--<script src="scripts/DemoController.js" type="text/javascript"></script>-->
  <script src="js/main.js"></script>
</head>
 <body ng-controller="MyCtrl">
   <table>
<tr >
<td  class="text-center col-md-1" ng-class="{{vivier.value1/vivier.value2 < 1}}?'redCell':'otherCell'"> {{vivier.value1/vivier.value2 < 1}}</td>
  
  <td  class="text-center col-md-1" ng-class="{{vivier.value2/vivier.value1 < 1}}?'redCell':'otherCell'"> {{vivier.value2/vivier.value1 < 1}}</td>
  
</tr>

   </table>
</body>
</html>

Angular.js：动态颜色表单元格

HTML

CSS

3 个答案: