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

Question

我正在开发一个Web应用程序，我在其中维护一个收藏夹表。如何在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函数不起作用。请帮忙！

提前致谢！

编辑：我还附上了我的桌子图片 - ＆gt;

Answer 1

如果值为零，简单使用ng-class设置为显示红色

＆＃13;

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;