Using ng-class to compare against a self-invoked value

Greetings! I have utilized this tag to modify my CSS style based on a condition where totalAsset and sortedAsset are equal.

<div class="table-row" ng-repeat="x in myData" 
ng-model="sort(x.totalAsset)" 
ng-class="{'lightblue': x.totalAsset == sortedAsset}">

The data for totalAsset is structured as follows:

$scope.myData = [
{
totalAsset: "23557"
},
{
totalAsset: "4512190",   
},
{
totalAsset: "2190",   
},
{
totalAsset: "1256790",   
}
]

I have implemented a function that automatically sorts the totalAsset values.

$scope.sort = function(totalAsset) {

$scope.unsortedAsset = totalAsset;
$scope.sortedAsset = $scope.unsortedAsset.split("").sort().join("");
console.log(sortedAsset);
}

According to the logic, only the first and last rows should turn blue, while the other two rows remain unchanged.

However, I am facing an issue where only the last row turns blue, whereas the first one does not. Any suggestions on how to resolve this?

javascriptcssangularjs

Answer №1

It's uncertain whether you need the {{ }} (they may not be necessary in ng2 at least).

<div class="table-row" ng-repeat="x in myData"
ng-model="sort(x.totalAsset)"
ng-class="x.totalAsset == sortedAsset ? 'lightblue' : ''">

Another option is to handle the comparison in a controller function:

$scope.areValuesEqual() {
if($scope.x.totalAssets == $scope.sortedAssets) {
return 'lightblue';
}

return; 
}

However, this approach might not be the most aesthetically pleasing, but it's worth considering.

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

Mantine Props Extension Not Displaying in Storybook Vite

It's frustrating that I can only see my defined props in Storybook and not the Mantine props. How can I display all the Mantine props along with my own? Here are my type files: import { InputVariant, TextInputProps as MantineTextInputProps, } fro ...

javascriptreactjstypescriptvitemantine

Verify if the user is already present in the MongoDB database and authenticated with Passport

I'm currently exploring the usage of passport and I am in the process of setting up a "register" page functionality. The registration process is working smoothly, along with the log-in form. Yet, I am looking to implement a validation to check if the ...

javascriptmongodbauthenticationpassport.js

Adding elements within a loop using jquery

I am currently working on adding a toggle button using Javascript. I want to include three span tags inside it as well. To achieve this, I am creating a span variable and attempting to append it within a basic FOR loop that iterates 3 times. Below is the ...

javascriptjqueryhtml

Is your Node.js EventLoop operation stuck in limbo?

This pertains to a Node/Express/MongoDB application, involving an AJAX call Previously, the selector.html() event was updating the html content of the selector, but now it is not. The only modification made was the addition of an editAll() function in ...

javascriptjqueryhtmlnode.jsmongodb

What is the process of inserting information into a nuxt-link in nuxt.js?

I am currently facing an issue with passing data into nuxt-link. Whenever I click on the link, nuxt-link returns a 404 error and fails to load the file. However, the other two links that use :href and hardcoding seem to be working fine. <template> ...

javascriptvue.jsvue-componentnuxt.js

How can AngularJS display ellipses using the limitTo filter exclusively for strings that surpass the character limit?

Looking to use the limitTo filter on strings? If a string is under 10 characters, it will be displayed as is. But if it's longer than 10 characters, I need to cut it off at the tenth character and display ellipses. Is there an easy way to do this with ...

angularjsstringfilter

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

javascriptjquerycssprogress-barprogress

arrangement of rows and columns within Bootstrap 3 framework

I am attempting to display the name 'test' three times in a row and three times in the second row, but it is not appearing horizontally as intended. Instead, everything is displaying in a vertical column pattern... <head> <meta ch ...

htmlcsstwitter-bootstrap-3bootstrap-modalbootstrap-4

displaying 'undefined' upon completion of iterating through a JSON file using $.each

For my project, I am attempting to extract only the date data from a JSON object. I have successfully looped through the object and displayed it, but the issue arises at the end of the loop where it shows undefined. I am not sure what mistake I am making. ...

javascriptjqueryjsonajax

Step-by-step guide on accessing a specific object in a MongoDB array using its ObjectID

I have an array of reviews and I am trying to extract a specific review from an array of objects within a schema. Below is the schema structure: const sellerSchema = new mongoose.Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: " ...

javascriptnode.jsmongodbexpressmongoose

How can you specify a "default" value for history.pushState and replaceState?

What value should be used in the title param for browsers to use their default settings? In Safari 5.1.7 (7534.57.2), using either null or undefined as the title param defaults to the browser's settings. However, Opera 12.16 interprets "null" and "u ...

javascripthtmldomcross-browserhtml5-history

Examining - Assessing the Link (next/link)

I am currently working on writing unit tests to verify the functionality of my navigation links. Here is a snippet from my MainNavigation.js file: import Link from 'next/link'; const MainNavigation = () => { return ( <header> ...

javascriptreactjsjestjsnext.js

The h2 tag in a React component is not reflecting the updated state, only showing the initial state

I am facing an issue with updating a hook state and displaying it in a h2 tag in JSX. I have initialized the state as an array of objects with 'artist' properties, containing artists Peter and Andrew: const [itemList, setItemList] = useState([{a ...

javascriptreactjsfetch

What causes the lower gap to be smaller than expected when using "top: 50%; translateY(-50%);" on specific elements within the parent container?

My top-bar layout needs to have all elements vertically centered, but I'm experiencing issues with the top-bar_right-part not behaving as expected when using the core_vertical-align class. The left menu works fine, however. To illustrate the problem, ...

htmlcsscss-positionvertical-alignmentcss-transforms

In IE8, scrolling a child div causes the entire page to scroll

I noticed that when a div with a scrollbar reaches its end, the page begins to scroll. While this is a default behavior for most browsers, I want to prevent the page from scrolling once the div has reached its end. I have come up with a solution and create ...

javascriptjqueryhtmlinternet-explorer-8

Showing a specific document from an <input> field using AngularJS

I currently have a functional example using standard Javascript, but I am eager to enhance its compatibility with AngularJS. My main objective is to dynamically update the span element with the filename of the file chosen by the user. Below is the code s ...

javascriptangularjsfilereader

Replacing elements with jQuery

In the process of designing a webapp, I am utilizing jquery's .replaceWith() function. The HTML structure I have is as follows: {% for service in services %} <div id="service" name="name" value="{{service.name}}"> {{service.n ...

javascriptjqueryhtml

Executing jQuery script on dynamically loaded content

My website utilizes AJAX requests to load pages dynamically. One specific page includes a marquee script that I would like to implement. Unfortunately, due to the dynamic loading of the page, the marquee script is not functioning as expected. I have come ...

javascriptjquerydynamic

Tips for preventing a React component from re-fetching data when navigating back using the browser button

In my React app using Next.js and the Next Link for routing, I have two pages set up: /product-list?year=2020 and /product-list/details?year=2020&month=4 Within the pages/product-list.js file, I am utilizing React router to grab the query parameter ye ...

javascriptreactjsroutesnext.js

How can I create two vertically-aligned left-floated divs?

Hey, I have a user info section with the user pic, user name, and user bio. I want the user pic on the left side and the name & bio on the right side. Here is the HTML code: <div class="user-info"> <div class="user-pic"> <img src=" ...

csscss-float