AngularJs Real Time Stock Ticker - Flash Highlight Green or Red when value changes

Question

I am experimenting with building a real-time stock ticker app using angularjs.

app.js

var sa = angular.module('sa', []);

sa.controller('HomeController', function ($scope, $http, $timeout) {

    var poll = function() {
        $http.get('/api/v1/stocks').success(
            function(stocks)
            {
            $scope.stocks = stocks;
            $timeout(poll, 2000);
            }
        );
    };

    poll();
});

home.html

<table>
    <tbody>
    <tr data-ng-repeat="stock in stocks">
        <td>{{ stock.code }}</td>
        <td>{{ stock.bid }}</td>
        <td>{{ stock.ask }}</td>
        </tr>
    </tbody>
</table>

The poll works fine and updates stocks correctly, however what I am looking to achieve is if the stock value increases, then animate-flash the background of that bid/ask in green. If the stock value decreases, then animate-flash the background of that bid/ask in red.

What I am looking for is for background of stock to flash red / green, then fade out to background colour.

Is there a watch / event listener function that can help me tap into this?

Answer 1

One approach to conditionally adding and then removing a class to an element was discussed in Angular js - Highlight dom when value changes

The accepted answer includes a directive, called "highlighter", that temporarily adds a class when a watched value changes. The directive can be modified slightly to apply different css classes when the change in value is an increase or decrease. That, combined with some css transitions, is basically what you are looking for.

See this demo: http://jsfiddle.net/wittwerj/byS82/

change to highlighter directive:

var newclass= nv < ov ? 'highlight-red' : 'highlight-green';  

HTML

<tr data-ng-repeat="stock in stocks track by $index" class="list" >  
    <td>{{ stock.code }}</td>
    <td highlighter="stock.bid">{{ stock.bid }}</td>  
    <td highlighter="stock.ask">{{ stock.ask }}</td>  
</tr>

CSS

.highlight-red {
    background-color: red;  
}
.highlight-green {
    background-color: green;  
}
td {
    -webkit-transition: 1s linear all;  
    transition: 1s linear all;  
    background-color: clear;  
}