使用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樣式屬性類似。