javascript - 使用 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 分钟已经过去并将结果从绿色变为红色的函数。抱歉造成混淆。

编辑2: 这是原始样本(根本没有格式化)。我现在将集成新代码。

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

Answer 1

让我们向我们的 Controller 范围添加一个函数:

$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 的工作原理是，如果右侧的计算结果为真，则从左侧分配一个名称的类。

还有一个 ng-style 可以做类似 css 样式属性的事情。