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>
    

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

How can I customize the color of the Title Component in Ant Design using Styled Components?

I am currently integrating Ant Design with styled components in my project. One of the components in my application is a NavBar that includes an H1 Component. H1.tsx import React from 'react'; import { Typography } from 'antd'; impor ...

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

I am looking to customize the font size of \section and \subsection in doxygen's html output. Additionally, I want to include numbering for the sections and sub(sub)sections in the format: 1 Section1 1.1 Subsection1.1 1.1.1 Subsubsection ...

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

What is the best technique for evaluating different businesses' operating hours?

I am trying to compare the opening hours stored on my server with the current time. Here are the details: Start: 09.00 End: 00.30 The goal is to determine if the store is open or closed based on the current time. If the current time falls outside of t ...

Variable scope not properly maintained when there is a change in the Firebase promise

I am currently working on developing a controller function to handle signup submissions using Firebase. However, I've encountered an issue where the variables within the scope (controllerAs: $reg) do not seem to update correctly when modified inside a ...

Exploring the world of unit testing promises within JS data models in an Angular

We have integrated js-data and js-data-angular into our current project. The model we are using is as follows: (function () { 'use strict'; angular.module('dash.models') .factory('Diagnosis', ['DS', functio ...

Google Map in Bootstrap FullScreen Mode Not Mobile-Friendly

Could you please take a look at the provided link and advise me on why the map is not responding correctly? I am also facing issues with the positioning of the map on the page, so any guidance on adjusting it appropriately would be greatly appreciated. Be ...

Unexpected behavior encountered with Angular module dependency injection

Having some difficulty managing dependencies for my node app. Here's the current structure: app.js var app = angular.module('myApp', ['myController', 'myFactory', 'rzModule', 'chart.js', 'myServ ...

Utilizing Restangular to refine search results with filters

I need help troubleshooting an issue with my Restangular query. Despite trying various methods, I am unable to retrieve filtered data successfully. Here are the different approaches I have attempted: $scope.welcomes = Restangular.all("projects").getList({ ...

Tips for displaying animations only the first time using HTML and CSS:

Upon the initial visit to my website, a captivating animation introduces itself with the words "Hello. I'm Bob" as it gracefully fades into view. Navigating through the menu bar allows users to explore different sections of the site. However, there ...

Implement horizontal scrolling feature to code container

One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...

Issue: AngularJS not refreshing view after receiving server response

Currently, as I work on developing a mobile application, I've come across an issue related to relaying messages in the view after executing an ajax call and receiving data from the server. My goal is to display these messages to users only after they ...

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

I have successfully implemented Angular and $sce in my project to handle HTML special characters and link video files in the database to a video player. However, I am facing issues connecting the HTML audio player to audio files stored in the same database ...

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

Unlinked Checkbox in Angular Bootstrap Modal Controller

I am currently utilizing the modal feature from Bootstrap 3's Angular fork, and I am facing an issue with using a checkbox within the modal and retrieving its value in my main controller. The checkbox value is properly bound in the view but not in th ...

AngularJS is failing to recognize the onload event when loading a URL

I am currently working with the AngularJS Framework and I have encountered an issue. My directive only seems to work when the window is fully loaded. screensCreators.directive('createscreen', function () { return { restrict: "A", ...

Struggling to customize checkbox design using HTML and CSS

Why am I unable to style HTML checkboxes with CSS? No matter what I try, the appearance of the checkboxes remains unchanged: Here is the HTML code: <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /> <nput type="checkbox" id ...

The body content is stopping halfway down the page, causing my footer to appear in the middle of the page

For some reason, I'm having trouble getting the footer to properly align at the bottom of the page. My body only seems to go halfway up the page. I tried wrapping everything in a main tag and setting a height on that, but it always ends up stopping at ...

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...