Organizing table listings based on specific needs with Angular.js

I've been attempting to use Angular.js to sort the table list, but it doesn't seem to be working as expected. Below is my code:

<tbody id="detailsstockid">
<tr ng-repeat="c in clickSummary | orderBy:['-total','+rest_name']">
  <td>{{$index+1}}</td>
  <td>{{c.rest_name}}</td>
  <td>{{c.page_hit}}</td>
  <td>{{c.map_hit}}</td>
  <td>{{c.gallery_hit}}</td>
  <td>{{c.phone_hit}}</td>
  <td>{{c.web_hit}}</td>
  <td>{{c.total}}</td>
</tr>   
</tbody>

My goal here is to sort the list based on the total and rest_name fields. The idea is to sort by total column value in descending order, and if there are duplicates, then sort by rest_name. However, the current output I'm getting looks like this.

https://i.sstatic.net/eTMMN.jpg

In the image, you can see that an entry with a total column value of 11 is appearing last, when it should actually appear first.

Answer №1

The sorting is based on string comparison instead of number comparison, resulting in the data not being displayed as numbers.

For more information, refer to the documentation here

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

Prevent the button in the modal from triggering a refresh

I am facing an issue with the button in my modal. I have added an onclick, but the problem occurs when clicking on it using the mouse or pressing the enter key, as it refreshes the page. What I want is to be able to click on ENTER and execute my function ...

Ways to address observables in Angular in a manner similar to deferred objects

Transitioning from AngularJS to Angular has posed a challenge for me, especially when it comes to moving from promises to observables. Below is an example of my code in AngularJS: var deferred = $q.defer(), frame = document.createElement('newFrame ...

Ways to display Div contents based on selected options in an Angular 2/4 list

"Struggling with dynamically displaying div contents" Situation:- I have a list of 3 items: *Menu1 *Menu2 *Menu3 and I have separate div contents for each of these menu items. Requirement :- By default, Menu1 should be displayed. When Menu2 is clicked, ...

Why won't the props pass down to the child component?

I am facing an issue while trying to pass two values as props from a React component "App" to its child "Todo". The values being passed are "title" and "completed" from a json placeholder API. The JSON object is correct and has been verified. The problem ...

Independent Dropbox Collections

Query: function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var ...

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

My attempt to retrieve HTML content using Angular Js Post HTTP method was successful, but only for text contents like P tags. I am now trying to fetch HTML contents that include input types such as text boxes using Angular JS. Interestingly, when I utilize ...

Create a cookie that expires after 1 hour and verify its presence upon loading the page

Looking to add a subtle animation for new site visitors without it showing up every time they switch between pages? You're not alone - I'm experiencing the same issue. Check out my code snippet: $(document).ready(function() { "use strict"; ...

How can I resolve the "ReferenceError: $ is not defined" error when trying to use jQuery with Node.js on the server side?

Can someone assist me? I'm encountering an issue with using jQuery in my node.js app. Every time I attempt to use '$', I receive an error stating "$ is not defined" even though I have defined it at the beginning. Here's the process I fo ...

Mastering various techniques for creating styles with makeStyles in React JS Material-UI

As a newcomer to React JS and Material UI, I am experimenting with creating various styles of buttons. Each button should have a unique appearance based on attributes like name= submit, ok, cancel, confirm, alert. App.JS import CssButton from './con ...

Having trouble adding a root view in React Native

Recently I attempted to incorporate 'react-native-popup' into my project, only to encounter a frustrating error message displayed on a red screen when rendering the popup. Oddly enough, upon reloading the app, the error transforms into a warning ...

Trouble with displaying pagination within an iframe

I am facing an issue with the pagination in iframe where the height of the iframe does not increase according to the content when I navigate to the next page. Please see the issue demonstrated here: http://fsportal.us-east-1.elasticbeanstalk.com usernam ...

Using AJAX to inject JSON data from PHP into Edge Animate

For a school assignment, I am currently working on a project using edge animate. My objective is to import data from a database hosted on my school's webspace and incorporate it into the edge animate project. Despite researching online for a solution ...

Ways to trigger an alert based on a MySQL query output?

I've been searching all day but can't seem to figure it out. Basically, I have an HTML page with a jQuery function that sends data to a PHP file to fetch information from a database. Retrieving the data to the HTML page is working fine. Now, wh ...

Patience is key as we wait for the webpage to finish loading

I've been searching for a solution to this issue for quite some time without any success... On my webpage, I have a square texture as the background which is set to repeat in order to fill the entire page. However, when a user first enters my site, t ...

Nested object type checking is not being performed

I have been developing an Angular application and working with two interfaces: IAbc and IXyz. interface IAbc { id: number, name: string } interface IXyz { id: number, value: string | number | Date | IAbc[]; } In my code, I initialize a va ...

MERN Stack: Efficient File Uploads

After recently delving into programming with the MEAN Stack, I am in the process of building a social network using the MEAN.io framework. My current challenge lies in getting file uploads to function correctly. I aim to receive files from forms within the ...

Vue JS Spinner that can be used for multiple components within a single page in the same Vue application

Welcome to my Vue.js app. I am looking to add separate spinners inside each component's body instead of loading for the entire app. If there are any other spinner plugins available, feel free to suggest them. CDN links for Vue.js <script type="te ...

Seeking the location of the `onconnect` event within the Express framework

With the use of "express," I have implemented a middleware function like so: app.use(function(request, response, next) { console.log(request.headers["user-agent"]); // etc. }); This currently displays the user-agent header in the console for ever ...

Do we need to use parseInt for the '*' operator in JavaScript?

I have an array where I am mapping it at some point to calculate the sum and percentages. However, when I tried implementing the logic, I noticed that using '*' directly works fine but using '+' adds the two strings together. For exampl ...

The deployment on heroku encountered an error during the build process

I'm attempting to deploy my React application on Heroku, but I keep encountering the following errors: -----> Installing dependencies Installing node modules npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ...