How to dynamically change the color of an AngularJS element based on a condition?

As someone who is new to AngularJS, I am currently working on changing the color of a table element to yellow if the user has voted on a specific choice.

<div ng-show="poll.userVoted">
        <table class="result-table">
            <tr ng-repeat="choice in poll.choices">
                <td>{{choice.text}}</td>
                <td>
                    <table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
                        <tr>
                            <td>{{choice.votes.length}}</td>
                        </tr>
                    </table>
                    <table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
                        <tr>
                            <td>{{choice.votes.length}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

cssangularjsconditional-statements

Answer №1

To achieve this, utilize the ng-class directive.

Implement ng-class on your td element in the following manner:

<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>

This will apply the yellowstyle CSS class to the item when the specified condition is met.

In your specific case:

<table class="result-table">
  <tr ng-repeat="choice in poll.choices">
    <td>{{choice.text}}</td>
    <td>
      <table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
        <tr>
          <td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Assuming you have a style.css file with the following definitions:

.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}

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

Achieving consistent sizing for React-Bootstrap cards: A guide

In my React app, I am utilizing React-bootstrap and specifically the Card & CardGroup components. I need assistance in ensuring that all the cards have the same height. JSX component: <Card style={{flex: 1}} className="card"> ...

cssreactjssingle-page-applicationreact-bootstrapportfolio

Utilizing Angular 1.5 and ES6 to Enhance Dependency Injection

Hi there, I am currently exploring Angular and attempting to integrate ES6 into my workflow. I seem to be facing an issue with dependency injection where I cannot seem to get it working as expected. Here is a snippet from my index.js file: import ...

javascriptangularjsecmascript-6

Adding a stylesheet dynamically to the <head> tag using $routeProvider in AngularJS

Is there a way to load a specific CSS file only when a user visits the contact.html view on my AngularJS application or site? I came across this helpful answer that almost made sense to me How to include view/partial specific styling in AngularJS. The acce ...

cssangularjsconditional-statementsroute-provider

AngularJS Loopback SDK - querying associated models

The AngularJS "SDK creates a Category.products() method that can be used to list all products in a given category," as stated in the loopback documentation. $scope.products = Category.products({ id: $scope.category.id, }); Although this method works ...

angularjsloopbackjs

Placing a small image on top of multiple images using CSS

I am facing a CSS issue and I need help with positioning a small image (using position absolute) like a warranty badge on top of larger images. The challenge is to ensure that the badge is fixed at the bottom left corner of each image, despite variations ...

javascriptcss

The child divs are not adjusting to the height of the parent container

My goal is to have the height of the children div .cell fill up 100% of the parent's height, but it doesn't seem to be working. This is the HTML code: <div class="header"> header </div> <div class="wrapper"> <di ...

htmlcssheight

Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solutio ...

htmlcss

Top recommendations for Backand on JSON manipulation and associated entities

I am currently exploring how to set up my Backand application and its REST API. This question pertains to the topic of "Backand deep querying". I am in search of some best practice code examples for executing server-side code that loops through data object ...

angularjsjsonrestbackand

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

cssreactjsmaterial-ui

Tips on how to align bullet points in a list

I'm currently working on a little exercise that requires me to replicate this However, I'm facing some difficulty aligning the bullets as shown in the reference. My content is aligned but not the bullets. Here's the link This is my HTML: ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Discovering the exact distance between a 'li' and a 'div' element

Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...

javascriptjqueryhtmlcss

Providing a BR tag with a distinctive on-screen look (prior to the break happening)

After coming across this particular inquiry, I discovered that in the past, styling the line break (BR) tag with CSS was not possible. Nevertheless, thanks to the latest browsers, this limitation is a thing of the past now. My aim is to give certain line b ...

htmlcss

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

Integrating dynamic PHP echo strings from a database into an established CSS layout

I am currently exploring PHP and MySQL databases, and I have managed to develop a basic search engine for my website. However, I am facing an issue that I am struggling to resolve: Is there a way to integrate the PHP echo output (search results) into the ...

phphtmlmysqlcss

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

Overriding the !important declaration in inline styles within various CSS IDs and classes

I need to find a way to override an inline !important declaration that is nested inside multiple CSS ids and classes. Let's analyze the following situation: <div class="A"> <div class="B"> <div class="C"> < ...

jqueryhtmlcssinline

Non-responsive Ionic 2 Page

On an Ionic 2 page, I encountered an issue where the application becomes unresponsive after pulling data from a service. This makes it impossible to interact with anything on the page, whether on a device, simulator, or in a browser. home.html <ion-he ...

angularjscordovaionic-frameworkionic2

Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...

htmlcss

Traversing JSON data in a recursive manner without definite knowledge of its size or nesting levels

Currently, I'm working on a chrome app that utilizes local storage. The backend returns JSON data which I then save locally and encrypt all the items within the JSON. I have multiple sets of JSON with different encryption functions for each set. I at ...

javascriptarraysangularjsobjectfor-loop

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml