Displaying a variable in an AngularJS scope function and performing a comparison on it in the view

Greetings, I have been utilizing 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-click="sort()" 
ng-class="{'lightblue': x.totalAsset == sortedAsset}">

totalAsset contains the following data:

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

I have created a function that automatically sorts the totalAsset values:

$scope.sort = function (){
$scope.unsortedAsset = $scope.myData.totalAsset;
$scope.sortedAsset=$scope.unsortedAsset.split("").sort().join("");
}

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

Answer №1

Utilizing the sort() function gives you direct access to $scope.myData.totalAsset. This will be interpreted as a reference to the final object within $scope.myData with a totalAsset attribute.

If your intention is to iterate through all objects in myData, you can accomplish this by providing a parameter to the sort function as shown in the snippet below.

$scope.sort = function (totalAsset){
    $scope.unsortedAsset = totalAsset;
    $scope.sortedAsset=$scope.unsortedAsset.split("").sort().join("");
}

Additionally, ensure that you invoke the sort function with the designated parameter value.

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

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

Is there a way to eliminate the initial and final double quotes within Angular 4?

Similar to JavaScript, TypeScript also uses either double quotes (") or single quotes (') to enclose string data. I have data coming from the backend that includes HTML content. Here is an example of my API response: <p>afjhjhfsd</p> Wh ...

Error Encountered: Eclipse Luna Crashing due to Null Pointer

Every time I click on a project, JSP page, or Java file in my Eclipse Luna, it keeps throwing a 'Null Pointer Exception'. This problem started happening after I attempted to install an AngularJS plugin. I am confused and not sure what the issue i ...

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

Since upgrading to angular 13, I've encountered an issue while attempting to create a worker in the following manner: new Worker(new URL('../path/to/worker', import.meta.url), {type: 'module'}) This code works as expected with "ng ...

The Chevron Down icon is unresponsive within the Semantic Dropdown style

I am currently facing the challenge of switching the semantic UI dropdown icon from Caret Down ('\f0d7') to Chevron Down ('\f078'). Despite following the advice provided in this JSFiddle, I was unsuccessful in achieving the d ...

Is it possible to extract JSON data from a reverse geocoding request to Google

Looking to extract specific information from a reverse geocode response using Google Maps JavaScript API v3. geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { ...

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

HTML is loaded repeatedly using the ajax load() function, without involving JSON

My idea involves the seamless loading of HTML files from one to another. The visual representation below can provide a better understanding. To illustrate, there are several HTML files - no1.html, no2.html, no3.html, no4.html, etc. - all sharing a common J ...

Using kendo ng-delay in conjunction with a page refresh on a dropdownlist results in the list contents disappearing

As part of a learning exercise, I am in the process of rewriting a web app that originally used knockout and jQuery UI to now using kendo and angular. The issue I am facing involves a kendo-drop-down-list element that is populated with data from an ajax c ...

What is the best way to extend a div to fill the full width of a webpage?

I'm struggling to align a div perfectly with the left, right, and top edges of the page. Despite trying various solutions suggested by others, I just can't seem to get it right! Any assistance would be greatly appreciated. Thank you. ...

Exploring the process of date filtering in Angular

Currently, I am working on a project that involves Angular and PHP. Within the project, there is a "select" option where I can choose a specific date and view all corresponding details in a table. Everything is functioning as expected, however, I have enco ...

Invoke a function within the redux reducer

The code within my reducer is structured as follows: import {ADD_FILTER, REMOVE_FILTER} from "../../../../actions/types"; const removeFilter = (state, name) => { return state.filter(f => f.name !== name); }; export default function addRemoveFi ...

Transferring a picture from a computer to a Fabric.JS Canvas

Seeking Fabric.JS Experts! I've conducted thorough research but I'm struggling to find a clear explanation on how to add an image to the fabric.JS canvas. User Journey: a) User uploads an image using an input file type button. b) Once they sel ...

Trigger a jQuery function upon clicking a button

I am attempting to create a jQuery function that can be called independently, and then trigger the function when a click event occurs. Below is the code I have put together: HTML: <input type="text" class="form-control email_input" name='email&ap ...

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

I have a good understanding of how to use jQuery's $.ajax: $.ajax({ url: //twitter endpoint, method:"GET", dataType:"jsonp", success:function() { //stuff } }); Is there a way to set the JSONP datatype for an angular $http service reque ...

"Engage with an Angular directive using a button positioned in any location on the

There is a directive implemented on my webpage with an assigned id attribute, regardless of its functionality. Now, I need a second directive that essentially triggers the first one. Here is an example of what I aim to achieve: <body> <!-- v ...

Cease the ngTable getData function for ngTableDynamic in order to retrieve data while sorting

The ngTable documentation lacks adequate information and sample codes, making it difficult to follow. Despite this, I was able to create the following code to dynamically fetch and display a table from the server. However, when I try to sort by clicking on ...

Show and hide elements using jQuery's toggle functionality

Here is some HTML code that I have: <div id="text-slide"><ul class="menu"> <li><a href="" id="toggle1">Webdesign</a> </li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"> ...

Generating a new array based on the keys found in a collection of objects

My array structure is quite complex with multiple objects containing different properties. let arr = [ { id: 1, name: "tony", hatColor: "blue" }, { id: 2, name: "larry", hatColor: "red" }, { id: 3, name ...

AngularJS validation for minimum character count prevents character overflow

Encountering an unusual "issue". I've set up a form with a textarea that has both a minlength and maxlength validation. In addition, there's a straightforward character count displayed: <textarea ng-trim="false" ng-model="form.text" minlengt ...

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...