Using AngularJS to filter and order items in an ng-repeat loop with multiple variables

Question

Using AngularJS to filter and order items in an ng-repeat loop with multiple variables

I hold a dataset with employment history. There are two fields for the employment dateTo:

yearTo, monthTo

To accurately sort the employment history by the most recent dateTo, I utilize the following code:

<tr id="employment_history_" ng-repeat="history in candidate.employmentHistory | orderBy : ['-yearTo','monthTo',] | date:['YYYY', 'MMM'] ">

The sorting functions as intended. However, there is one dilemma. The field monthTo may include the value Present instead of solely the month date format like JAN, FEB MAR, etc.

My question is how can I prioritize records with the monthTo value of Present to appear first on the list despite having a date format?

javascript angularjs sorting

Answer 1

Answer №1

If you're looking for a good starting point, check out this JSFiddle that can guide you in the right direction: JSFiddle

The concept behind this approach is to provide an array of predicates to the orderBy directive, as demonstrated in your provided example. While string predicates were used in your example, it's worth noting that function predicates can also be utilized. A function predicate allows you to determine the values used for ordering, based on the item being sorted.

ng-repeat="hist in main.history | orderBy: ['-yearTo', main.orderMonthTo]"

this.orderMonthTo = function(item) {
    if (item.monthTo === 'Present') {
    return -13;
  } else {
    return Number(moment(item.monthTo, 'MMM').format('M'))*-1;
  }
}

For more detailed information on this topic, refer to this resource. Additionally, in the JSFiddle example, the momentjs library was used to simplify date handling.

Answer 2

If you're looking for a good starting point, check out this JSFiddle that can guide you in the right direction: JSFiddle

The concept behind this approach is to provide an array of predicates to the orderBy directive, as demonstrated in your provided example. While string predicates were used in your example, it's worth noting that function predicates can also be utilized. A function predicate allows you to determine the values used for ordering, based on the item being sorted.

ng-repeat="hist in main.history | orderBy: ['-yearTo', main.orderMonthTo]"

this.orderMonthTo = function(item) {
    if (item.monthTo === 'Present') {
    return -13;
  } else {
    return Number(moment(item.monthTo, 'MMM').format('M'))*-1;
  }
}

For more detailed information on this topic, refer to this resource. Additionally, in the JSFiddle example, the momentjs library was used to simplify date handling.

Using AngularJS to filter and order items in an ng-repeat loop with multiple variables

Answer №1

Similar questions

able to move through the content without displaying the scrollbar

Adjust the alignment and floating of text within an iframe on the same domain

Can you combine multiple user validation rules with express-validator?

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

sending multiple checkbox selections to a PHP script using jQuery

Is a Promise nested within another Promise?

Tips for waiting for an event from a specific element in Playwright

Unable to apply CSS styles to a form input using Ajax

Is there a way to transmit React code using Express?

SQL inputs with information that updates automatically / autofill SQL input boxes

Obtaining user roles from server without using JWT tokens

An unusual html element

Searching for items using angularFireCollection?

Generating hills with PlaneGeometry in Three.js

Combine theme configuration options within Material-UI

Styling text by reducing its size with CSS

creating dynamic column headers with JavaScript

Accessing configuration properties from a JavaScript file in AngularJS version 1.5.X

What is the best way to position a single element in React using the Grid Component without causing any overlap?

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2