Help setting up Angular ng-class is needed

Hey there, I'm currently attempting to change the background color of my CSS based on the value of ng-class (true or false). Can someone help me out with this?

<div id="home">

Summoner

         <div id="information" ng-repeat="match in matches | limitTo: 10">
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/champion/{{ champions[match.championId]}}.png"  />
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item0}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item1}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item2}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item3}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item4}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item5}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item6}}.png"/>
             <span ng-class ="{{match.stats.win}}">
             <p>{{champions[match.championId]}}</p>
             <p>{{match.subType}}</p>
             <p>{{match.lane}}</p>
             <p>{{match.stats.championsKilled}} Kills </p>
             <p>{{match.stats.numDeaths}} Deaths </p>
             <p>{{match.stats.assists}} Assists </p>
             </span>


        </div>

</form>

javascriptangularjsng-class

Answer №1

Instead of assigning true/false directly to ng-class, you will assign classes based on expressions.

If match.stats.win returns true/false, you can use the following code to assign a conditional class with ng-class:

<span ng-class="{'winBg': match.stats.win, 'loseBg': !match.stats.win}">

When match.stats.win is true, it will have the class winBg, and when false, it will have the class loseBg.

You can then define your styles for winBg and loseBg in your CSS file like so:

.winBg
{
    background-color: green;
}
.loseBg
{
    background-color: red;
}

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

Inject nested controller dynamically

I am working on a straightforward ASP.NET MVC application that includes an ng-controller. I am trying to inject another ng-controller inside this controller using a partial view, but I'm having trouble getting the binding to work correctly. You can s ...

javascriptasp.net-mvcangularjs

The values obtained from the previous parameter object of the React setState hook can vary and are not always

In my code, I am using a useEffect hook to update the state with setState. However, I'm encountering some unusual and inconsistent behavior with the previous parameter: useEffect(() => { setCurrentPicturesObject((existing) => { ...

javascriptreactjsuse-effectsetstate

Why are Actions and Reducers essential components in the Redux framework?

Despite my experience with Redux, I still struggle to grasp the purpose of actions and reducers. The documentation defines a reducer as (previousState, action) => newState, a concept also seen in React's useReducer. Having one function handle all ...

javascriptreactjsredux

As for the Pixel Art Creator feature, you can now switch between different modes and

I'm seeking assistance regarding my Pixel Art Maker project. I recently implemented two new features, toggle() and remove(). The issue I'm facing is that when I input numbers to create the grid and click the submit button, the grid is successfull ...

javascriptjquery

Is there a way to clear the list after each input is made?

Looking for help with the Ping Pong Test. Whenever I click Start and enter a number, it just keeps adding to the list. How can I make it reset the list after each input? $(document).ready(function() { $("#Start").click(function() { ...

javascript

Is there a way to use Jest spyOn to monitor a function that is returned by another function?

I'm curious about why the final assertion (expect(msgSpy).toBeCalled()) in this code snippet is failing. What adjustments should be made to ensure it passes? it('spyOn test', () => { const newClient = () => { const getMsg = ...

javascripttypescriptjestjsmockingspyon

Implementing Ajax to Load Template-Part in Wordpress

Hey there! I'm currently working on enhancing my online store by adding a new feature. What I'd like to achieve is that when a customer clicks on a product, instead of being taken to the product page, the product details load using AJAX right on ...

javascriptphpjqueryajaxwordpress

Is there a way to access the userID in the React.js front-end?

As I work on completing my Full Stack Web app with JWT token authentication based on roles, I find myself facing challenges with the front-end development. Specifically, I am unsure of the best practice for retrieving the UserID in the front-end to facil ...

javascriptc#reactjssql-server

"Revolutionary AJAX-enabled PHP social commenting system with multi-form support

Why is it that when I submit forms using these ajax functions in PHP, they only send to the first form on the page? I have multiple forms under each article and I want them to be submitted separately. What am I doing wrong? ...

javascriptphpjqueryhtmlajax

What is the best way to retrieve the overall error status from the Material UI DataGrid?

I am currently utilizing the Material UI DataGrid element to display information from an EXCEL file. Each Excel document consists of numerous column titles with specific types assigned to them. As an example: const columns = [ { "field&quo ...

javascriptmaterial-uimui-x

The selection option fails to update when there is a change in the ng-model

My issue involves two select tags, named Select 1 and Select 2, each with their own ng-model variables and separate methods triggered by ng-change. I am attempting to set the value of the Select 1 option from a method called by the ng-change of Select 2. H ...

angularjsangular-ngmodelangularjs-ng-change

What is the best way to group all matched objects from an array based on multiple keys?

const data = [ { amount:10, gameId:7 , consoleId:3, id: 1 }, { amount:5, gameId:18 ,consoleId:3, id: 2 }, { amount:5, gameId:18 ,consoleId:3, id: 3 }, { amount:10, gameId:7 ,consoleId:3, id: 4 ...

javascriptnode.jsarrayslodash

steps for making a specific cell editable in tabulatorI'm happy to help

click here for image description required initializeTabulatortableBng() { let thisClass = this; let bngTableData = thisClass.tableDataWorm; function formatDecimal(cell) { var value = cell.getValue(); if (value !== null && value !== undefine ...

javascriptangulartabulator

Angular - Displaying a message on blur event when user updates input field

As I search for an effective way to validate forms in Angular without overly aggressive error messages, I have found that checking for $dirty and $touched before displaying messages generally works well. However, there is one scenario that poses a challeng ...

angularjsformsvalidationng-messages

Changes made to an Array are not reflected in AngularJS data-ng-repeat

I have created a custom directive that displays notes left by users for a product. The directive contains a div that shows all the notes stored in the $scope.MessageList. <mx-note-manager-two isModalPopup="true" is-show-date-range="{{IsSh ...

angularjs

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

After successfully retrieving my API data, I am now tasked with updating it. Within my component, I have the ability to log the data using the following code snippet. In my application, there is an input field where I can enter a new name for my product an ...

javascriptreactjsapiexpressshopify

JavaScript refuses to execute

I am facing an issue with a static page that I am using. The page consists of HTML, CSS, and JavaScript files. I came across this design on a website (http://codepen.io/eode9/pen/wyaDr) and decided to replicate it by merging the files into one HTML page. H ...

javascriptjquerylinker

Creating a personalized context menu in Javascript: The ultimate guide to incorporating copy and paste features

We are developing a unique context menu for our online text editor, complete with copy/paste options. However, we encountered difficulties accessing the system clipboard from within the browser. It once seemed impossible to achieve this, as discussed in th ...

javascript

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

javascriptjqueryhtmlcss

Retrieve element attributes and context inside a function invoked by an Angular directive

When working with a directive definition, you have access to the $element and $attrs APIs. These allow you to refer back to the element that called the directive. However, I'm curious how to access $element and $attrs when using a standard directive l ...

javascripthtmlangularjs