Angular: Arrange items by a combination of ascending and descending properties

When iterating through my ng-repeat, I need a specific order for my items. I know I can use a list of properties to set the order:

ng-repeat="client in clients | orderBy: ['isOpen', 'lastAccessTime']"

My question is, how can I specify ascending and descending orders?

I want the primary sorting based on isOpen in DESC order, and secondary sorting based on lastAccessTime in ASC order. How can I achieve this in my ng-repeat loop?

EDIT: I attempted the following approach, but when two items share the same isOpen value, the item with the highest lastAccessTime does not appear at the top:

ng-repeat="client in clients | orderBy: 'isOpen':true | orderBy: 'lastAccessTime'"
javascriptangularjssorting

Answer №1

To define the sorting order, you have the option to use either a "+" or "-" before the property name. This signifies ascending or descending order, as explained in the documentation on orderBy.

Answer №2

To customize the sorting order, you can utilize an array with optional prefix symbols like + or -


ng-repeat="client in clients | orderBy: ['isOpen','-lastAccessTime']"

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

What is the best way to manage uploading images with varying proportions in React Js?

I've been scouring the internet for the best way to upload images of varying sizes (width and height) while still being able to display them neatly in a gallery format. An ideal example is the Facebook gallery, where all the pictures are perfectly al ...

javascriptreactjsimageimage-resizingimage-manipulation

What is the best way to assign specific JSON data "values" to named $scope variables in Angular when retrieving data from a SPARQL query?

As a newcomer to Angular, I apologize if my question seems ignorant. I have searched through dataversity, stack overflow, google ... as well as w3c and tried various "try it and see solutions," but I just can't seem to make this work. Essentially, I ...

jsonangularjsstringbindingsparql

Selenium and AngularJS patiently wait before carrying out specific actions

I have been using selenium to test an AngularJS application and I am encountering an issue where I am unable to perform any actions on the page until it is fully loaded. Although I have considered using Thread.sleep(), I am aware that this is not the most ...

javascriptjavaangularjsseleniumselenium-webdriver

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

javascriptjqueryhtmlcss

What could be the reason for my NextJS 'getStaticProps' function not executing as expected?

My primary reason for using Next.js is the 'getStaticProps' function, but unfortunately, it seems to not be running as expected. I attempted to create a new app from scratch using "npx create-next-app@latest" with no success. I then tried withou ...

javascriptreactjsnext.jsgetstaticprops

Break down one object into an array consisting of multiple objects

I have a single object in the following array: [{"IP_Address":"33.4.160.5","originEmailAddress":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f050e020a1c2f18060303061c410c0002">[email protected]</a>"}] I am lookin ...

javascript

The returned type of intersected functions in Typescript does not match the inferred type

While attempting to extract the return type of an intersected request, I encountered a discrepancy between the return type and the inferred type. Check out the shortened URL for more details: https://tsplay.dev/mAxZZN export {} type Foo = (() => Promis ...

javascripttypescriptfunctionreturn-typetype-mismatch

Pattern for identifying Google Earth links with regular expressions

I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...

javascripthtmlregex

How can you display varying information based on a dropdown selection using Material-UI's Select component?

By default, the Select component is populated with the correct data. However, I am facing an issue where selecting the "InReview" option should display the options inside the statusArr and remove the previous ones. Thank you in advance for your help. Her ...

javascriptarraysreactjsmaterial-uimap-function

The issue persists with the MVC Controller parameter returning as null consistently, especially when the object field is

When using JavaScript to call a controller and process a function, I encountered an issue where the parameter value (name in summary) is null when the field is set to private. However, the function works correctly when the field is set to public. Is settin ...

javascriptasp.net-mvcparameterscontrollerprivate

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

I am facing an issue where I need to reset the select option to `0` when another option is selected. I have tried the code below for this purpose. if (varALPO1MobNum == "0") { var selectElement = $(&apo ...

javascripthtml

Determine whether a click event originated from within a child window

Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...

javascriptjqueryhtml

Utilize Vue and webpack to seamlessly load images

Currently experimenting with the following: <img src="./src/assets/logo.png"></img> Or maybe this option: background-image: url("./src/assets/logo.png"); I have executed npm install [email protected] npm install file-loader --save-dev. ...

javascripthtmlvue.jswebpack

Once all the asynchronous $http calls have finished loading, bring up the Template/Controller route

At this time, my index.html file contains the following: <div ng-controller="MainCntl"> <div ng-view></div> </div> The ng-view directive is responsible for loading either "template1.html" or "template2.html" based on the rou ...

angularjs

I am currently working with an input element that is set to hidden. I am trying to change its type to text using JavaScript, but I can't seem to figure out how to do it or if it is even possible

I'm stuck trying to change the type of an input element from hidden to text using JavaScript. I can't seem to figure out if it's even possible. Can someone please help me with this? Thanks! ...

javascript

Tips on how to showcase up to 200 characters from a string

<?php include ($_SERVER['DOCUMENT_ROOT'].'/header.php'); include ($_SERVER['DOCUMENT_ROOT'].'/adtop.php'); if(mysql_num_rows($deals) > 0){ while($row = mysql_fetch_assoc($deals)){ echo '<div id= ...

javascriptphpjqueryhtml

Having issues with npm python-shell integration within electron framework

I'm currently attempting to establish a connection between a python script and an Electron app by utilizing the npm's python-shell package. The requirement is for the script to be executed whenever a button is clicked. So, let's assume my d ...

javascriptpythonnpmelectrondesktop-application

Error encountered during AJAX POST request: NETWORK_ERR code XMLHttpRequest Exception 101 was raised while using an Android device

Here is the ajax post code that I am using: $.ajax({ type: "POST", url: "http://sampleurl", data: { 'email':$('#email').val(), 'password':$('#password').val(), }, cache: false, ...

javascriptandroidjqueryajax

Determining the Visibility of a Control within a Container with Scrollbars

Here is the code snippet that I am working with: <div style="overflow: scroll; width: 75px; background-color: Black; "> <table style="background-color: Red"> <tr> <td> < ...

javascriptjqueryhtml

a simple guide to setting a "lowest possible value" in javascript

As I was working on creating a shop/store in my index.html file, I had the idea of implementing a feature that would prevent users from buying items if they don't have enough gems. For example: You can buy 1 coin for 20 gems [Buy] Gems: 19 Coins: 0 Er ...

javascripthtml