javascript - 更改动态表 AngularJS/JavaScript 中文本的颜色

Question

我正在开发一个网络应用程序，在其中维护一个收藏夹表。如何更改 HTML 表格中值的颜色？例如，如果特定列的值小于 0，则显示为红色，如果值 id 大于 0，则显示为绿色。这是我的代码片段:

<table class="table table-striped" style="margin-top: 10px;" id="favoritesTable">
    <tr>
        <th>Symbol</th>
        <th>Stock Price</th>
        <th>Change (Change Percent)</th>
        <th>Volume</th>
        <th></th>
    </tr>
    <tr ng-repeat="x in mylist">
        <td><a ng-click="changeValue(x[0]);getStockDetails()" style="color: blue; cursor: pointer;" data-slide="prev" href="#myCarousel">{{x[0]}}</a></td>
        <td>{{x[1]}}</td>
        <td id="changeAndPercent">{{x[2]}} ({{x[3]}}%)</td>
        <td>{{x[4]}}</td>
        <td><button class="btn btn-default btn-sm" ng-click="removeFromTable(x[0])"><span class="glyphicon glyphicon-trash"></span></button></td>
    </tr>
</table>

我将数据存储在 angularJS 中的 mylist 变量中。我想检查 x[2] 是否大于 0，然后将其显示为绿色，如果小于 0，则将其显示为红色。

我尝试过在表中添加脚本标签并在 JavaScript 中创建表。当我在 JavaScript 函数中创建表时，ng-click 函数不起作用。请帮忙!

提前致谢!

编辑:我还附上了我的 table 的图像 -->

Answer 1

简单使用ng-class设置为在值为零时显示红色

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.data=[{value:0},{value:-1},{value:1}]
});

.text-red{
  color:red
}

.arrow-green{
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  
  border-left: 20px solid green;
}
.arrow-red{
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  
  border-left: 20px solid red;
}
  .text-green{
  color:green
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>

<tr ng-repeat="item in data">
  <td ng-class="{'text-red': item.value <=0,'text-green': item.value >0}">
   My value is {{item.value}}
 <div  ng-class="{'arrow-red': item.value <=0,'arrow-green': item.value >0}"></div>
  </td>
</tr>
</table>
</div>