如果日期超过AngularJS ng-repeat，则突出显示行

Question

I have a small web app using Bootstrap & AngularJS to display table data received remotely via JSON api request. Table are generated with ng-repeat. On of the columns contains date of the last update named 'last_seen'. I want to highlight rows where this field are more than 1 hour in past from the current date.

Searching for examples here or on the web most suggests using Date() object or AngularJS 'date' filter. Based on these I've managed to achieve desired result with this code:

    <script type="text/javascript">
    var dataApp = angular.module('dataApp', []);
    dataApp.controller('dataShow', function($scope, $http, $filter) {
        $http.get('api.php').success(function(data) {
            $scope.Data = data;
        })
        $scope.DangerDate = new Date() - 1000*60*60; // now - 1 hour
        $scope.dangerDate = $filter('date')($scope.DangerDate, 'yyyy-MM-dd HH:mm:ss');
    });
</script>

'

    <div ng-app="dataApp" ng-controller="dataShow" class="panel-body">
        <div class="panel panel-default">
            <table class="table table-striped table-hover" id="output">
                <thead>
                    <tr>
                        <th class="{{header}}" ng-repeat="(header, value) in Data[0]"></i></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in Data" ng-class="{ danger: row.last_seen <= dangerDate }">
                        <td ng-repeat="cell in row">{{cell}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

But these examples didn't compared date directly in HTML template like I did with row.last_seen <= dangerDate .

I also don't really like the way I've used to get 'current date - 1 hour' with JS - creating Date() object, subtracting seconds from it to get that and then using $filter to convert that to text value.

Is that ok to do those things or there is a better way?

Answer 1

Your proplem isnt about angular but getting date comparison to work in javascript. Below code will be helpful of understanding how such thing works.

var d1 = new Date();
var d2 = new Date(d1);

console.log(d1 == d2);   // prints false (wrong!) 
console.log(d1 === d2);  // prints false (wrong!)
console.log(d1 != d2);   // prints true  (wrong!)
console.log(d1 !== d2);  // prints true  (wrong!)
console.log(d1.getTime() === d2.getTime()); // prints true (correct)

Credits to @moonshadow from the this post ->. source: Compare two dates with JavaScript

After converting your dates to new Date(); objects you can compare them within the

ng-class="{ danger: row.last_seen_withdateobject.getTime() <= dangerDate.getTime() }"

Your code would have looked like this. Implying the logic. ( as far as I understood ) Your want to show posts highlighted that are 1 hour or much older than that.What I would do

set seperately for each row foreaching;

row.last_seen2 = new Date() - 1000*60*60;
$scope.now = new Date();

ng-class="{ danger: row.last_seen2.getTime() - now.getTime() }"

check out this little fiddle I created for your demonstrating your needs and play with the hours and minutes to see how it works.. https://jsfiddle.net/xykqxmpy/6/