Question

我正在尝试使用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>

民意调查工作正常，并正确更新股票，但我想要实现的是股票价值增加，然后以绿色动画闪烁该买入/卖出的背景。如果股票价值下降，则以红色动画显示该买入/卖出的背景。

我正在寻找的是股票背景为红色/绿色，然后淡出为背景颜色。

是否有监听/事件监听功能可以帮助我解决这个问题？

Answer 1

在Angular js - Highlight dom when value changes

中讨论了一种有条件地向元素添加然后删除类的方法

接受的答案包括a directive, called "highlighter"，当观看的值发生变化时会临时添加一个课程。当值的变化增加或减少时，可以稍微修改该指令以应用不同的css类。结合一些css过渡，基本上就是你要找的东西。

请参阅此演示：http://jsfiddle.net/wittwerj/byS82/

更改为荧光笔指令：

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

AngularJs实时股票代码 - 当价值变化时，Flash突出显示绿色或红色

1 个答案:

HTML

CSS