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的工作方法是，如果右侧评估为真，则从左侧为一个类命名。

还有ng-style与css样式属性类似。

使用angular和javascript对表进行条件格式化

1 个答案: