Dynamic change of table cell text color based on condition utilizing ng-if and ng-style

I am looking to create a table cell with alternating color combinations based on specific conditions. Here is the code snippet:

<tr ng-repeat="x in data">
<td>
<span ng-if="((x.time2 < x.time1) ||  (x.time2 < x.time3))" ng-style="color:red" {{x.val}}></span>
<span ng-if="((x.time2 === x.time1) &&  (x.time2 === x.time3)" ng-style="color:blue" {{x.val}}></span>
</td>
</tr>

However, I'm facing an issue where the value is not displaying in red even though x.time2 is less than x.time1. Sample time values are time1="2017-03-15 06:06:56", time2="2017-03-08 07:09:40" and time3="2017-03-08 07:09:40". All time values are in string format.

cssangularjshtml-table

Answer №1

Consider updating your code in the following manner:

    <table>
        <tbody>
            <tr ng-repeat="y in info">
            <td>
            <span ng-if="y.time4 < y.time5 || y.time4 < y.time6" ng-style="{color: 'red'}" >{{y.value}}</span>
            <span ng-if="y.time4 === y.time5 && y.time4 === y.time6" ng-style="{color: 'blue'}" >{{y.value}}</span>
            </td>
            </tr>
        </tbody>
    </table>

I have also adjusted the placement of y.value within span... It is uncertain if this was an oversight or intentional.

Answer №2

Example of HTML:

 <td [ngClass]="((x.time2 < x.time1) ||  (x.time2 < x.time3))?'red': (x.time2 === x.time1) &&  (x.time2 === x.time3)?'green':'black'" >
            {{x.val}}
          </td>

Demonstration of CSS classes:

.red {
  color: red;
}

.green {
  color: green;
}

.black{
  color: black;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The value of $parent.$index will consistently be 0 in all cases

I am currently dealing with a nested ng-repeat situation where I am attempting to determine the parent's index. Due to the fact that it is being arranged post-process, the standard ng-repeat="(step_index, step) in flow" method is not working for m ...

javascriptangularjs

The toggle button appears to be lacking in CSS styling

I'm trying to create a dropdown button using Bootstrap and ng-bootstrap in my Angular project. Here's the HTML I've written: <div ngbDropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownBasic1" n ...

cssangulartwitter-bootstrap-3angular6ng-bootstrap

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Tips for updating the text shown in an md-select box without affecting the underlying model

Using the Angular material library directive md-select, I have implemented a feature to display country codes to users. When a country is selected, I want to show only the country's dialing code in the select box. For example, if the user selects Ind ...

javascriptangularjsangular-material

Is it possible to redirect to the initial request after authentication in an Angular Fullstack application?

Exploring the angular-fullstack (https://github.com/DaftMonk/generator-angular-fullstack) yeoman generator for the MEAN stack has been quite the learning curve for me as I navigate these technologies. One challenge I'm facing is understanding how to r ...

angularjsauthenticationhttp-redirectmean-stackangular-fullstack

What is the best way to enable this image lightbox to function seamlessly with both horizontal and vertical images?

Looking to create a responsive image lightbox? After starting from an example on W3Schools (https://www.w3schools.com/howto/howto_js_lightbox.asp), I ran into issues with portrait oriented images. Ideally, the solution should handle both landscape (e.g., 1 ...

htmlcss

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

javascriptangularjshtmlsortingcanvas

Enhance your images with a hover zoom effect while viewing an overlay on top

Is there a way to make an image still zoom in on hover even when it has an overlay using CSS? I am currently working with Bootstrap 5.2 Thank you in advance. .trip-card { position: relative; } .trip-card img { border-radius: 30px; } .overlay { ...

htmlcssbootstrap-5

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

Define the hover color options within your personalized Bootstrap 4 design

Currently, I have customized Bootstrap 4.5.3 with some simple modifications. Below is the custom SCSS code I am using: $newcolor1: #00a89c; $newcolor2: #e61b53; $colors: ( "newcolor1": $newcolor1, "newcolor2": $newcolor2 ); $ ...

cssbootstrap-4sasscustomization

Sending JSON information from a template to a Django view

In my table, I have an attribute value with a CHAR data type. I am trying to post string data from an HTML template that I obtained from an HTTP GET request using AngularJS. However, when I click the submit button, I receive the following error: `ValueE ...

pythonangularjsdjangodjango-views

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

jqueryhtmlcssscrollposition

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

htmlcss

Transitioning Opacity in CSS

I found inspiration for my project from the following source: https://codepen.io/plavookac/pen/qomrMw One challenge I'm facing is changing the opacity of the movement, which is not covered by the standard transition markers. .mainInner{ display ...

htmlcss

Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile device ...

htmlcssflexboxresponsive

Discover and capture zip codes using javascript

Looking to extract zip codes from strings like "HONOLULU HI 96814-2317 USA" and "HONOLULU HI 96814 USA" using JavaScript. Any suggestions on how to achieve this? ...

javascriptangularjs

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

cssdoctypecss-transformsquirks-mode

Distinguishing between {{::somevalue}} and {{somevalue}} in AngularJSIs there a

Hey everyone, I'm currently working on a project where I've come across two different syntaxes for data binding: {{::somevalue}} and {{somevalue}}. I'm not sure about the purpose of each one and couldn't find any information about it on ...

angularjs

Resposiveness of force-directed graph is lost

const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...

javascriptcssd3.jssvg

Basic title in material-ui navigation bar

I was hoping to display a simple label on the right side of the AppBar. Currently, I am using the iconElementRight prop and inserting a disabled flat button: <AppBar iconElementRight={<FlatButton label="My Label" disabled={true}/>} /> Thi ...

cssmaterial-ui