Arranging in ascending order based on two variables in AngularJS

My current situation requires me to organize a list based on two values in ascending order.

First, it should be sorted by SCHEDSTART if available. If SCHEDSTART is blank, then it should be sorted by WONUM.

The div containing SCHEDSTART should always appear first.

I attempted to write some code to achieve this, but unfortunately, it's not functioning as expected:

Here is the code snippet I wrote:

Code 1:

<ion-item ng-repeat="wo in vm.workOrders | orderBy : dynamicOrder">

Controller:

function dynamicOrder(wo){
            if(wo.json.SCHEDSTART){
                return wo.json.SCHEDSTART;
            }else{
                return wo.json.WONUM;
            }
        }

Code 2:

<ion-item ng-repeat="wo in vm.workOrders | orderBy : ['json.SCHEDSTART','json.WONUM']">

Answer №1

Not sure if this is the most effective method, but I suggest creating two ion-item elements with an ng-if directive on each of them. Here's an example:

<ion-item ng-if="SCHEDSTART" ng-repeat="wo in vm.workOrders | orderBy : SCHEDSTART>

and

<ion-item ng-if="!SCHEDSTART" ng-repeat="wo in vm.workOrders | orderBy : WONUM>

The ng-if directive evaluates to true or false based on its truthiness or falsiness. If SCHEDSTART is considered truthy (contains content), then the first ion-item tag will be displayed in your DOM.

If SCHEDSTART is considered falsy (e.g., 0, "", null, undefined, NaN), then the first tag will look like this in the DOM:

<!--ng-if="SCHEDSTART"-->

To ensure that this approach works reliably, you can create a specific variable to determine whether SCHEDSTART is truthy or not. Based on the provided code snippet, you can modify it as follows:

var schedStartHasData;

function dynamicOrder(wo) {
    if (wo.json.SCHEDSTART) {
        schedStartHasData = true;
    } else {
        schedStartHasData = false;
    }
}

Then, update your view to include these variables within the ng-if directives:

<ion-item ng-if="schedStartHasData" ng-repeat="wo in vm.workOrders | orderBy : SCHEDSTART>

and

<ion-item ng-if="!schedStartHasData" ng-repeat="wo in vm.workOrders | orderBy : WONUM>

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

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Is there a way to combine a smaller image with a larger background image on one canvas while allowing the smaller image to move around? I'll need to save the original background pixel data so that each frame can be redrawn with the overlay in its upda ...

The HTML Canvas arc function fails to properly align curves

UPDATE Upon further investigation, I've discovered that this problem only occurs in Chrome. Could it be a browser issue rather than a coding problem? I'm working on creating a circle with clickable sections using HTML5 Canvas. The circle itself ...

Creating a dynamic and interactive menu using three.js

In a team project, one member has utilized three.js to create the graphical elements of our software, while I have been assigned the task of developing a Menu / Display feature within the program due to time constraints. The software showcases a 3-D graph ...

The npm start command is throwing a TypeError because it cannot determine the node

I am encountering an issue while trying to start a react app using npm start. My project is using node js 10.24.1, and due to it being a legacy project, I am unable to upgrade to a newer version. I have attempted clearing the cache with force, deleting n ...

Handling Ajax response in datatable

While working on a project that involves integrating DataTables and Excel files, I encountered the challenge of uploading an Excel file and displaying its contents using DataTables. Despite my search for a JavaScript library that could parse the Excel fi ...

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

Validating passwords using Vuetify

I am implementing password validation on my form using Vuetify validation rules: passwordRules: [ v => (v && v.length >= 1 && v.length <= 10) || 'Password length should be between 1 and 10', v => (v && v.l ...

Error: In Nodejs Promises, you cannot invoke the "then" method on an undefined value

Could you clarify what's incorrect about the following code snippet? var promise = fs.readFile(file); var promise2 = promise.then(function(data){ var base64 = new Buffer(data, 'binary').toString('base64'); res.e ...

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

Tracking the last time an app was run in Javascript can be achieved by creating a variable to store the date when

Exploring the world of Javascript as a newbie, I find myself with index.html, stylesheet.css and div.js in my app. Within div.js lies a code that magically generates a schedule for our team members over 2 weeks. However, there's a catch - consistency ...

Enhance your Wordpress posts with a custom pop-up form for each individual button

On a page, there are various custom posts being displayed with the post type 'property', each containing a button: <button class="btn btn-primary">Submit Offer</button> This button is looped and shown below every post. What ...

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

I'm in the process of upgrading a table, and while most of it is working fine, there is one function that's giving me trouble. I want this function to return an input with an inline onClick event. The actual return value is displaying correctly, ...

Is it possible to bind UI-SELECT to the controller.js using an Array?

Greetings to all readers, I'm a beginner in this language. Currently, I am attempting to utilize UI-SELECT and connect the data to controller.js for storage in the database. I understand that UI-SELECT should be employed with ng-model in the "A.sele ...

Getting a count value from the server and converting it into JSON format on an Android device

Seeking assistance with retrieving the number of rows from a server table using JSON parsing and PHP in an Android project. The PHP code shown below successfully fetches the value, but I am unsure about how to proceed with parsing the JSON data. Any guidan ...

Activating Button within Featherlight Modal

This is a follow up question from Featherlight hide div on Close After successfully resolving the issue with opening the lightbox, I have encountered another problem. I have added a submit button that should trigger an on('submit', function) whe ...

Obtain the user's email using nodemailer

I created a contact form using Nodemailer that I am having trouble with. Take a look at the code below: let mailOptions = { from: '<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3636360e363636602d2123">[emai ...

Tips for finding the position of a specific object within an array of objects using JavaScript when it is an exact match

I am working with an array of objects and need to find the index of a specific object within the array when there is a match. Here is an example of my current array: let x = [ {name: "emily", info: { id: 123, gender: "female", age: 25}}, {name: "maggie", ...

What is the method for subtracting pixels from a percentage value?

Is there a way to accomplish a similar effect to this: height: calc(100% - 50px); height: -webkit-calc(100% - 50px); height: -moz-calc(100% - 50px); In browsers that do not support these properties? I have a responsive div with two children. The height ...

Puppeteer: Interacting with login dialog box fields

I am currently facing an issue while attempting to generate a .pdf file from a specific page on our Intranet using Puppeteer and Headless Chrome within Node.js. Generating a .pdf file from a regular webpage poses no challenge, but I am encountering diffic ...

Tips on deleting a nested JSON key?

Here is an example of my JSON structure: var data = [{ "ID" : 3, "discRec" : "Some sample record", "Tasks" : [{ "ID" : 7, ...