表的条件格式具有角和JavaScript [英] Conditional formatting of table with angular and javascript

问题描述

我

怎么会去见下表调理时lastPingedTimeAsString达到5分钟的标志，由绿色变为文本的颜色为红色，反之亦然。

 ＆LT;表格名称=MyForm的数据-NG-提交=提交（）的数据-NG-控制器=CTRLID =submitForm＆GT;
        ＆LT; P数据-NG-重复=打节拍＆GT;
            站ID：{{beat.stationID}}
            运行时间：{{beat.lastPingedAsString |日期：'mediumTime'}}
        ＆所述; / P＆GT;
        ＆LT;输入类型=提交ID =提交值=提交/＆GT;
    ＆LT; /表及GT;
 

我抬起头几页就在这里描述了如何通过类中使用的格式，但还没有得到它正常工作了。

编辑：
为了更清楚，我需要知道如何创建一个决定5分钟已经过去，结果由绿色变为红色的功能。很抱歉的混乱。

EDIT2：
这里是原始样品（未格式化在所有）。我现在整合新code。

 站ID：默认运行时间：2014年7月18日14:09
 

解决方案

让我们添加一个功能，我们的控制器范围：

  $ scope.diffMins =功能（pingDate）{
  VAR现在=新的日期（）;
  VAR diffMs =（现已pingDate）;
  返回Math.round（（（diffMs％86400000）％3600000）/ 60000）;
}＆LT;表格名称=MyForm的数据-NG-提交=提交（）的数据-NG-控制器=CTRLID =submitForm＆GT;
    ＆LT; P数据-NG-重复=打节拍NG-CLASS ={长期：diffMins（beat.lastPinged）＆GT; = 5}＆GT;
        站ID：{{beat.stationID}}
        运行时间：{{beat.lastPingedAsString |日期：'mediumTime'}}
    ＆所述; / P＆GT;
    ＆LT;输入类型=提交ID =提交值=提交/＆GT;
＆LT; /表及GT;
 

CSS： .longtime {颜色：红}

此假设你有一个 beat.lastPinged 作为一个JavaScript的日期。你还可以把业务逻辑里面 diffMins ，只返回true或false。

纳克级的工作原理是从assinging一类的名称，如果右侧的计算结果为真离开了。

还有一个 NG-风格，做一些类似的CSS样式属性。

How would I go about conditioning below table for when the lastPingedTimeAsString reaches a 5 minute mark and changes the color of the text from green to red, and vice versa.

<form name="myform" data-ng-submit="submit()" data-ng-controller="Ctrl" id="submitForm">
        <p data-ng-repeat="beat in beats">
            Station ID: {{ beat.stationID }}
            Uptime: {{ beat.lastPingedAsString | date : 'mediumTime'}}
        </p>
        <input type="submit" id="submit" value="Submit" />
    </form>

I've looked up several pages on here describing how to use formatting by class, but haven't gotten it to work out correctly.

EDIT: To be more clear I need to know how to create the function that determines 5 minutes has elapsed and turn the result from green to red. Sorry for the confusion.

EDIT2: Here is the original sample (not formatted at all). I will integrate the new code now.

Station ID: default Uptime: Jul 18 2014 2:09PM

解决方案

Let's add a function to our controller scope:

$scope.diffMins = function(pingDate) {
  var now = new Date();
  var diffMs = (now-pingDate);
  return Math.round(((diffMs % 86400000) % 3600000) / 60000);
}

<form name="myform" data-ng-submit="submit()" data-ng-controller="Ctrl" id="submitForm">
    <p data-ng-repeat="beat in beats" ng-class="{longtime:diffMins(beat.lastPinged)>=5}">
        Station ID: {{ beat.stationID }}
        Uptime: {{ beat.lastPingedAsString | date : 'mediumTime'}}
    </p>
    <input type="submit" id="submit" value="Submit" />
</form>

css: .longtime {color: red}

This assumes you have a beat.lastPinged as an javascript date. You could also put the business logic inside diffMins and just return true or false.

ng-class works by assinging a class with the name from the left if the right side evaluates as true.

There is also an ng-style that does something similar with css style attributes.

这篇关于表的条件格式具有角和JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！