Styling a table based on specific conditions using Angular and JavaScript

Question

Styling a table based on specific conditions using Angular and JavaScript

I am trying to conditionally style the text in the table based on the time elapsed since the last ping. Specifically, I want to change the color of the text from green to red once 5 minutes have passed and vice versa.

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

I have been researching how to apply formatting using classes, but I haven't been able to get it working properly.

EDIT: Just to clarify, my goal is to create a function that checks if 5 minutes have passed and then changes the color from green to red. Apologies for any confusion.

EDIT2: Here is the original sample (unformatted). I will now implement the new code.

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

javascript html css json angularjs

Answer 1

Answer №1

Here is a function added to the controller scope:

$scope.calculateTimeDifference = function(pingDate) {
  var now = new Date();
  var differenceInMs = (now - pingDate);
  return Math.round(((differenceInMs % 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: calculateTimeDifference(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}

This implementation assumes that there is a beat.lastPinged stored as a JavaScript date. Alternatively, you can encapsulate the business logic within calculateTimeDifference and simply return true or false.

ng-class assigns a specified class if the condition on the right evaluates to true.

Another directive to consider is ng-style, which applies similar functionality for CSS style attributes.

Answer 2

Here is a function added to the controller scope:

$scope.calculateTimeDifference = function(pingDate) {
  var now = new Date();
  var differenceInMs = (now - pingDate);
  return Math.round(((differenceInMs % 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: calculateTimeDifference(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}

This implementation assumes that there is a beat.lastPinged stored as a JavaScript date. Alternatively, you can encapsulate the business logic within calculateTimeDifference and simply return true or false.

ng-class assigns a specified class if the condition on the right evaluates to true.

Another directive to consider is ng-style, which applies similar functionality for CSS style attributes.

Styling a table based on specific conditions using Angular and JavaScript

Answer №1

Similar questions

managing arrays in JavaScript with multiple tables

invoke scrollToPosition function in React Native

Setting up Angular is a crucial step in starting your development journey

Displaying MongoIds in HTML output for the user

What is the best way to parse a JSON stream from a secure https source using perl

Header with a dropdown select option

Accessing images from subreddit using reddit API

The error message "TypeError: Router.use() expects a middleware function, but received a [type of function]" is a common occurrence in FeathersJS

Error loading GLTF file

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

What is the best way to set up a server in React using Express or HTTP?

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection

Phonegap app failing to run Ajax request properly

Having an issue with TypeScript and React where the onChange event on the <select> element is only setting the previous value instead of the current value when using the useState hook

Click event doesn't trigger the 'else if' statement in jQuery

Implementing pagination for images offers a user-friendly browsing experience

Using AJAX and Rails to set session variables in the presence of appcache

Extension for Chrome

Is there a way to configure Cordova to utilize Yarn JS instead of NPM when installing plugins?

The error message indicates that the Worklight adapter is an object, not a function