How to find values and apply attributes using Angularjs?

Question

How to find values and apply attributes using Angularjs?

Asked 7 years, 9 months ago

Viewed 201 times

2

I need to scroll through two specific columns of a table, locate the subtraction (-) and sum (+) symbol to apply one of the following rules:

For the subtraction symbol (-) color the text red;
For the sum symbol (+) color green text.

This action must be done using Angularjs.

Example table generated via 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 generating 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 paper exists. Below 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%"
            }
        }
    }
}

You upload the data from this table or is it fixed?

– novic

2017/02/19 at 02:33
this table is reloaded via ajax request, its contents receive refresh every 5 seconds.

– Fábio Jânio

2017/02/19 at 13:41
Put your code in full, all of it, including javascript, please?

– novic

2017/02/19 at 14:08
I updated the post with the code I’m using

– Fábio Jânio

2017/02/19 at 21:57

1 answer

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.

by novic • **35,673** points · Answer 1 · 2017-02-20T00:05:27+00:00

The data brought by ajax I set as an example, the routine would include two settings in the css and search with index of javascript if it is the sign of + if it’s not the least -.

Minimal example

1) a function on its own $scope:

var money = angular.module("money", []);
money.controller("moneyController", ["$scope",
  function($scope) {
    $scope.valores = [{
      Symbol: "CTSA3.SA",
      LastTradePriceOnly: "2.05",
      Change: "+0.05",
      ChangeinPercent: "+2.50%",
      DaysHigh: "2.05",
      DaysLow: "2.01",
      Open: "2.01",
      PreviousClose: "2.00",
      Volume: "26200"
    }, {
      Symbol: "CMIG4.SA",
      LastTradePriceOnly: "2.05",
      Change: "-0.05",
      ChangeinPercent: "-2.50%",
      DaysHigh: "2.05",
      DaysLow: "2.01",
      Open: "2.01",
      PreviousClose: "2.00",
      Volume: "26200"
    }];
    $scope.color = function(value)
    {
      var reg = value.indexOf("+");      
      if (reg !== -1)
      {
         return "green";
      }      
      return "red";
    }
  }
]);

.green {
   color: green;
}
.red {
   color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="money" 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 ng-class="color(valor.Change)">R$ {{valor.Change}}</td>
        <td ng-class="color(valor.ChangeinPercent)">{{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>
</div>

2) one filter to change the color and addition ngSanitize:

var money = angular.module("money", ['ngSanitize']);
money.filter('color', function($sce) {
  return function(input) {
    input = input || '';
    return value = (input.indexOf("+") > -1) ?
      '<label class="green">' + input + '</label>' :
      '<label class="red">' + input + '</label>';
  };
});
money.controller("moneyController", ["$scope",
  function($scope) {
    $scope.valores = [{
      Symbol: "CTSA3.SA",
      LastTradePriceOnly: "2.05",
      Change: "+0.05",
      ChangeinPercent: "+2.50%",
      DaysHigh: "2.05",
      DaysLow: "2.01",
      Open: "2.01",
      PreviousClose: "2.00",
      Volume: "26200"
    }, {
      Symbol: "CMIG4.SA",
      LastTradePriceOnly: "2.05",
      Change: "-0.05",
      ChangeinPercent: "-2.50%",
      DaysHigh: "2.05",
      DaysLow: "2.01",
      Open: "2.01",
      PreviousClose: "2.00",
      Volume: "26200"
    }];
  }
]);

.green {
  color: green;
}

.red {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.min.js"></script>
<div ng-app="money" 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 ng-bind-html="valor.Change | color"></td>
        <td ng-bind-html="valor.ChangeinPercent | color">
        </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>
</div>

_References: