使用angular和javascript的条件格式表

Question

当lastPingedTimeAsString达到5分钟标记并将文本的颜色从绿色更改为红色，反之亦然时，我将如何在表格下方进行调节。

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

我在这里查阅了几页，描述了如何按类使用格式化，但是还没有正确解决。

编辑：更清楚地说，我需要知道如何创建确定5分钟已经过去的函数并将结果从绿色变为红色。 对困惑感到抱歉。

EDIT2：这是原始示例（完全未格式化）。 我现在将集成新代码。

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

Answer 1

让我们向控制器范围添加一个函数：

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

假设您有一个beat.lastPinged作为JavaScript日期。 您还可以将业务逻辑放入diffMins并仅返回true或false。

ng-class工作原理是，如果右侧的评估结果为true，则使用左侧的名称来命名一个类。

还有一种ng-style ，其功能与CSS样式属性类似。