I need to go through two specific columns of a table, find the (-) and sum (+) symbol to apply one of the following rules:
- For the subtraction symbol (-) color the text red;
- For the sum symbol (+) color the text green.
This action should be done using AngularJS.
Example table generated by AngularJS:
<table class="table table-striped">
<thead>
<tr>
<th>Código</th>
<th>Preço</th>
<th>Variação (RS)</th>
<th>Variação (%)</th>
<th>Maior preço</th>
<th>Menor preço</th>
<th>Abertura</th>
<th>Fechamento</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">CTKA4.SA</td>
<td class="ng-binding">R$ 5.38</td>
<td class="ng-binding">R$ -0.04</td>
<td class="ng-binding">-0.74%</td>
<td class="ng-binding">R$ 5.50</td>
<td class="ng-binding">R$ 5.18</td>
<td class="ng-binding">R$ 5.38</td>
<td class="ng-binding">R$ 5.42</td>
<td class="ng-binding">26200</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">BTOW3.SA</td>
<td class="ng-binding">R$ 12.80</td>
<td class="ng-binding">R$ -0.11</td>
<td class="ng-binding">-0.85%</td>
<td class="ng-binding">R$ 12.94</td>
<td class="ng-binding">R$ 12.57</td>
<td class="ng-binding">R$ 12.91</td>
<td class="ng-binding">R$ 12.91</td>
<td class="ng-binding">629100</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">CIEL3.SA</td>
<td class="ng-binding">R$ 28.80</td>
<td class="ng-binding">R$ -0.28</td>
<td class="ng-binding">-0.96%</td>
<td class="ng-binding">R$ 29.07</td>
<td class="ng-binding">R$ 28.61</td>
<td class="ng-binding">R$ 28.78</td>
<td class="ng-binding">R$ 29.08</td>
<td class="ng-binding">5101900</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">AGRO3.SA</td>
<td class="ng-binding">R$ 12.25</td>
<td class="ng-binding">R$ +0.25</td>
<td class="ng-binding">+2.08%</td>
<td class="ng-binding">R$ 12.30</td>
<td class="ng-binding">R$ 12.20</td>
<td class="ng-binding">R$ 12.20</td>
<td class="ng-binding">R$ 12.00</td>
<td class="ng-binding">277000</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">BRML3.SA</td>
<td class="ng-binding">R$ 15.14</td>
<td class="ng-binding">R$ -0.06</td>
<td class="ng-binding">-0.39%</td>
<td class="ng-binding">R$ 15.24</td>
<td class="ng-binding">R$ 14.97</td>
<td class="ng-binding">R$ 15.03</td>
<td class="ng-binding">R$ 15.20</td>
<td class="ng-binding">3475600</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">BPHA3.SA</td>
<td class="ng-binding">R$ 7.75</td>
<td class="ng-binding">R$ -0.39</td>
<td class="ng-binding">-4.79%</td>
<td class="ng-binding">R$ 8.58</td>
<td class="ng-binding">R$ 7.72</td>
<td class="ng-binding">R$ 8.28</td>
<td class="ng-binding">R$ 8.14</td>
<td class="ng-binding">769400</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">CARD3.SA</td>
<td class="ng-binding">R$ 8.85</td>
<td class="ng-binding">R$ +0.85</td>
<td class="ng-binding">+10.63%</td>
<td class="ng-binding">R$ 8.85</td>
<td class="ng-binding">R$ 8.05</td>
<td class="ng-binding">R$ 8.05</td>
<td class="ng-binding">R$ 8.00</td>
<td class="ng-binding">894900</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">BPAN4.SA</td>
<td class="ng-binding">R$ 2.65</td>
<td class="ng-binding">R$ +0.02</td>
<td class="ng-binding">+0.76%</td>
<td class="ng-binding">R$ 2.69</td>
<td class="ng-binding">R$ 2.55</td>
<td class="ng-binding">R$ 2.64</td>
<td class="ng-binding">R$ 2.63</td>
<td class="ng-binding">383400</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">CMIG4.SA</td>
<td class="ng-binding">R$ 10.42</td>
<td class="ng-binding">R$ +0.08</td>
<td class="ng-binding">+0.77%</td>
<td class="ng-binding">R$ 10.49</td>
<td class="ng-binding">R$ 10.09</td>
<td class="ng-binding">R$ 10.25</td>
<td class="ng-binding">R$ 10.34</td>
<td class="ng-binding">7282100</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">BRSR6.SA</td>
<td class="ng-binding">R$ 16.85</td>
<td class="ng-binding">R$ +0.35</td>
<td class="ng-binding">+2.12%</td>
<td class="ng-binding">R$ 16.95</td>
<td class="ng-binding">R$ 16.32</td>
<td class="ng-binding">R$ 16.40</td>
<td class="ng-binding">R$ 16.50</td>
<td class="ng-binding">808900</td>
</tr><!-- end ngRepeat: valor in valores --><tr ng-repeat="valor in valores" class="ng-scope">
<td class="ng-binding">CTSA3.SA</td>
<td class="ng-binding">R$ 2.05</td>
<td class="ng-binding">R$ +0.05</td>
<td class="ng-binding">+2.50%</td>
<td class="ng-binding">R$ 2.05</td>
<td class="ng-binding">R$ 2.01</td>
<td class="ng-binding">R$ 2.01</td>
<td class="ng-binding">R$ 2.00</td>
<td class="ng-binding">200</td>
</tr><!-- end ngRepeat: valor in valores -->
</tbody>
</table>
Code that generates the table above:
<!DOCTYPE html>
<html lang="pt-br" ng-app="money">
<head>
<meta charset="UTF-8"/>
<title>BMF&Bovespa</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/lib/angular.min.js"></script>
<script>
angular.module("money", []);
angular.module("money").controller("moneyController", function ($scope, $http, $interval) {
function consultarCotacao() {
var arr = [];
var papeis = ['ABEaV3.SA', 'CIEL3.SA', 'CTKA4.SA'];
angular.forEach(papeis, function(papel) {
$http({
method: 'GET',
url: 'http://localhost/index.php?p=' + papel,
timeout: 3000,
headers: {'Content-Type': 'json'},
}).then(function successCallback(response) {
resultado = response.data.query.results.quote;
if (resultado.Name !== null) {
arr.push(resultado);
} else {
console.log(resultado.Symbol + ' não foi encontrado!');
}
}, function errorCallback(response) {
console.log('Falha na chamada do recurso.');
});
$scope.valores = arr;
/*$http.get(url).then(function (res) {
resultado = res.data.query.results.quote;
if(resultado.Name !== null) {
arr.push(resultado);
$scope.valores = arr;
} else {
console.log(resultado.Symbol + ' não foi encontrado!');
}
});*/
});
}
consultarCotacao();
//$interval(consultarCotacao, 5000, 0);
});
</script>
</head>
<body ng-controller="moneyController">
<table class="table table-striped">
<thead>
<tr>
<th>Código</th>
<th>Preço</th>
<th>Variação (RS)</th>
<th>Variação (%)</th>
<th>Maior preço</th>
<th>Menor preço</th>
<th>Abertura</th>
<th>Fechamento</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="valor in valores">
<td>{{valor.Symbol}}</td>
<td>R$ {{valor.LastTradePriceOnly}}</td>
<td>R$ {{valor.Change}}</td>
<td>{{valor.ChangeinPercent}}</td>
<td>R$ {{valor.DaysHigh}}</td>
<td>R$ {{valor.DaysLow}}</td>
<td>R$ {{valor.Open}}</td>
<td>R$ {{valor.PreviousClose}}</td>
<td>{{valor.Volume}}</td>
</tr>
</tbody>
</table>
</body>
</html>
The ajax request url calls a php page that delivers json files containing the data if the role exists. Here are 2 examples of json structure:
{
"query": {
"count": 1,
"created": "2017-02-19T21:54:08Z",
"lang": "pt-br",
"results": {
"quote": {
"symbol": "CTSA3.SA",
"Ask": "2.10",
"AverageDailyVolume": "6288",
"Bid": "1.91",
"AskRealtime": null,
"BidRealtime": null,
"BookValue": "6.24",
"Change_PercentChange": "+0.05 - +2.50%",
"Change": "+0.05",
"Commission": null,
"Currency": "BRL",
"ChangeRealtime": null,
"AfterHoursChangeRealtime": null,
"DividendShare": null,
"LastTradeDate": "2/17/2017",
"TradeDate": null,
"EarningsShare": "-0.37",
"ErrorIndicationreturnedforsymbolchangedinvalid": null,
"EPSEstimateCurrentYear": null,
"EPSEstimateNextYear": null,
"EPSEstimateNextQuarter": "0.00",
"DaysLow": "2.01",
"DaysHigh": "2.05",
"YearLow": "1.46",
"YearHigh": "3.29",
"HoldingsGainPercent": null,
"AnnualizedGain": null,
"HoldingsGain": null,
"HoldingsGainPercentRealtime": null,
"HoldingsGainRealtime": null,
"MoreInfo": null,
"OrderBookRealtime": null,
"MarketCapitalization": "80.56M",
"MarketCapRealtime": null,
"EBITDA": "136000.00",
"ChangeFromYearLow": "0.59",
"PercentChangeFromYearLow": "+40.41%",
"LastTradeRealtimeWithTime": null,
"ChangePercentRealtime": null,
"ChangeFromYearHigh": "-1.24",
"PercebtChangeFromYearHigh": "-37.69%",
"LastTradeWithTime": "3:53pm - <b>2.05</b>",
"LastTradePriceOnly": "2.05",
"HighLimit": null,
"LowLimit": null,
"DaysRange": "2.01 - 2.05",
"DaysRangeRealtime": null,
"FiftydayMovingAverage": "1.99",
"TwoHundreddayMovingAverage": "1.83",
"ChangeFromTwoHundreddayMovingAverage": "0.22",
"PercentChangeFromTwoHundreddayMovingAverage": "+11.83%",
"ChangeFromFiftydayMovingAverage": "0.06",
"PercentChangeFromFiftydayMovingAverage": "+3.04%",
"Name": "SANTANENSE ON",
"Notes": null,
"Open": "2.01",
"PreviousClose": "2.00",
"PricePaid": null,
"ChangeinPercent": "+2.50%",
"PriceSales": "0.23",
"PriceBook": "0.32",
"ExDividendDate": "5/4/2015",
"PERatio": null,
"DividendPayDate": null,
"PERatioRealtime": null,
"PEGRatio": "0.00",
"PriceEPSEstimateCurrentYear": null,
"PriceEPSEstimateNextYear": null,
"Symbol": "CTSA3.SA",
"SharesOwned": null,
"ShortRatio": "0.00",
"LastTradeTime": "3:53pm",
"TickerTrend": null,
"OneyrTargetPrice": null,
"Volume": "200",
"HoldingsValue": null,
"HoldingsValueRealtime": null,
"YearRange": "1.46 - 3.29",
"DaysValueChange": null,
"DaysValueChangeRealtime": null,
"StockExchange": "SAO",
"DividendYield": null,
"PercentChange": "+2.50%"
}
}
}
}
Another example:
{
"query": {
"count": 1,
"created": "2017-02-19T21:54:08Z",
"lang": "pt-br",
"results": {
"quote": {
"symbol": "CTKA4.SA",
"Ask": "5.39",
"AverageDailyVolume": "65409",
"Bid": "5.02",
"AskRealtime": null,
"BidRealtime": null,
"BookValue": "-29.73",
"Change_PercentChange": "-0.04 - -0.74%",
"Change": "-0.04",
"Commission": null,
"Currency": "BRL",
"ChangeRealtime": null,
"AfterHoursChangeRealtime": null,
"DividendShare": null,
"LastTradeDate": "2/17/2017",
"TradeDate": null,
"EarningsShare": "-13.24",
"ErrorIndicationreturnedforsymbolchangedinvalid": null,
"EPSEstimateCurrentYear": null,
"EPSEstimateNextYear": null,
"EPSEstimateNextQuarter": "0.00",
"DaysLow": "5.18",
"DaysHigh": "5.50",
"YearLow": "1.60",
"YearHigh": "11.00",
"HoldingsGainPercent": null,
"AnnualizedGain": null,
"HoldingsGain": null,
"HoldingsGainPercentRealtime": null,
"HoldingsGainRealtime": null,
"MoreInfo": null,
"OrderBookRealtime": null,
"MarketCapitalization": "33.38M",
"MarketCapRealtime": null,
"EBITDA": "17.20M",
"ChangeFromYearLow": "3.78",
"PercentChangeFromYearLow": "+236.25%",
"LastTradeRealtimeWithTime": null,
"ChangePercentRealtime": null,
"ChangeFromYearHigh": "-5.62",
"PercebtChangeFromYearHigh": "-51.09%",
"LastTradeWithTime": "5:04pm - <b>5.38</b>",
"LastTradePriceOnly": "5.38",
"HighLimit": null,
"LowLimit": null,
"DaysRange": "5.18 - 5.50",
"DaysRangeRealtime": null,
"FiftydayMovingAverage": "4.41",
"TwoHundreddayMovingAverage": "2.73",
"ChangeFromTwoHundreddayMovingAverage": "2.65",
"PercentChangeFromTwoHundreddayMovingAverage": "+97.36%",
"ChangeFromFiftydayMovingAverage": "0.97",
"PercentChangeFromFiftydayMovingAverage": "+21.87%",
"Name": "KARSTEN PN",
"Notes": null,
"Open": "5.38",
"PreviousClose": "5.42",
"PricePaid": null,
"ChangeinPercent": "-0.74%",
"PriceSales": "0.11",
"PriceBook": null,
"ExDividendDate": "5/2/2011",
"PERatio": null,
"DividendPayDate": null,
"PERatioRealtime": null,
"PEGRatio": "0.00",
"PriceEPSEstimateCurrentYear": null,
"PriceEPSEstimateNextYear": null,
"Symbol": "CTKA4.SA",
"SharesOwned": null,
"ShortRatio": "0.00",
"LastTradeTime": "5:04pm",
"TickerTrend": null,
"OneyrTargetPrice": null,
"Volume": "26200",
"HoldingsValue": null,
"HoldingsValueRealtime": null,
"YearRange": "1.60 - 11.00",
"DaysValueChange": null,
"DaysValueChangeRealtime": null,
"StockExchange": "SAO",
"DividendYield": null,
"PercentChange": "-0.74%"
}
}
}
}