Organizing string enum in Typescript and AngularJS - Tips and Tricks

In my Typescript file, I have defined an enum called PriorityLevel:

enum PriorityLevel {
High = <any>'High',
Normal = <any>'Normal',
Low = <any>'Low'}

In the HTML section, I have the following code:

<button id= "assignmentBtn" type="button" ng-repeat="item in list.getItems()" class="btn" ng-class="list.getcolor(item)">
        {{item.description}}
</button>

Each item in the list has a corresponding PriorityLevel.

My query is how to sort this list by PriorityLevel in the order of High, Normal, and Low. When I attempted to use

ng-repeat="item in list.getItems() | orderBy:'priority'"

I found that it sorts alphabetically. Is there a way to create a custom orderby function specific to my case?

Answer №1

It seems like creating a custom orderby function is the way to go, but I could use some guidance on how to do that specifically for my situation.

Here's how you can reference a custom function in the controller:

ng-repeat="item in list.getItems() | orderBy:list.customOrder"

The custom order function looks like this:

customOrder = function(item) {
   return item.priority === 'High' ? 3
          : item.priority === 'Normal' ? 2 
          : 1
};

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

How can I display an Angular UI tooltip once the ng-model-debounce has been activated

I want to display an angular-ui tooltip once the ng-model-options debounce is complete. The tooltip should appear on blur and disappear on focus. <input type="email" name="email" ng-model="ctrl.email" ng-model-options="{ debounce: 500 }" tooltip=" ...

Can you explain the variances between the index.html and index-async.html files within the AngularJS seed project?

Within the angularjs seed project, there are two files that appear to produce identical results: index.html and index-async.html. If you want to view the code for index-async.html, you can visit this link. Similarly, if you're interested in the code ...

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...

A guide to seamlessly uploading files to s3 using nextjs, node, and typescript

I've been struggling to successfully upload a basic image to s3 using ts/nextjs/node. Despite having all the necessary credentials and code in place, I'm still unable to get it working. Can someone please provide clear instructions on how to achi ...

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

I have developed a method to handle errors resulting from http requests. Here is an example of how it functions: public handleError(err: any, caught: Observable<any>): Observable<any> { //irrelevant code omitted this.logger.debug(err);//e ...

Transforming the window property in distinct entry points for TypeScript

During the initial page load, I am looking to transfer data from a template to a TypeScript file by attaching it to the window object. I want each page to utilize the same variable name for its specific data (window.data). An example of this can be seen in ...

What is the proper way to halt an iteration with the $q service in AngularJS

Trying to incorporate the $q service to introduce a pause in the iteration due to a condition that requires making API calls within a loop. Implemented the following method: function fetchData(id){ var deferred = $q.defer(); var data; Restangula ...

elements that are left between two URLs

I recently started learning Angular and I'm working on creating a website where certain elements persist between different URLs. I'm not sure of the best approach to achieve this. Ideally, the clicked elements should be present in both URLs (part ...

The magic of data binding in AngularJS's ng-repeat

Is it possible to dynamically call an attribute of a data-binded object based on the ng-repeat object? I have set up a simple example, but I'm not sure if it can be solved this way. Can anyone help with this? The goal is for the input to receive the ...

Tips for associating an id with PrimeNg menu command

Within my table, I have a list of items that I would like to enhance using PrimeNg Menu for dropdown menu options. The goal is to enable navigation to other pages based on the selected item id. When a user clicks on a menu item, I want to bind the id of th ...

Guide to creating individual column templates in Kendo-UI grid

I recently started using Kendo-UI in my project and wanted to have a column in my grid display an image button along with a field, similar to the 'Contact Name' column in the documentation here. After exploring the documentation, I came across th ...

Leveraging RXJS for real-time response to keyboard and mouse click combinations in web

I am new to RXJS and looking for a way to drag an HtmlElement when the user presses the space key and then drags the element with the mouse. The dragging should be initiated by either pressing the SPACE key followed by a left click, or vice versa. The dra ...

AngularJS: Where server-side templating meets modern web development

I am a beginner in the MEAN stack and recently developed an application using node.js, express, and mongodb. I would like to pass the username to the dashboard once the user logs in. How can I achieve this using AngularJS without relying on the ejs templat ...

Passing data from child components to parent components in NextJs using Typescript

I have created a new component <ConnectWallet setConnected={(t: boolean) => console.log(t)}> <>test</> </ConnectWallet> The component is initialized as follows import { useState, useEffect } from ' ...

Tips for breaking up array elements across multiple "tr" tags

In this particular example, I have a Fiddle set up with multiple tr elements displayed within an ng-repeat. My goal is to have three td elements per row. Would it be necessary to use an inner angularjs ng-repeat and split the iconDets array for this purpos ...

Using an image as a button in Vue.js: A step-by-step guide

I'm currently working on creating a login button within a single-file-component using Vue.js in my Rails application with a Vue.js front-end. The purpose of this button is to redirect users to an external login page when clicked. I am wondering how I ...

Unlocking the power of $http convenience shortcuts in AngularJS

I have developed a custom function (credit to source) that wraps an AngularJS $http function in a way that switches between browser XHR and cordova-plugin-advanced-http based on the device platform. While the function works seamlessly with $http({method:& ...

How can I create interfaces for deeply nested objects in TypeScript?

Check out my current JSON data below: { "state_1": { "date": [ { 1000: { "size": 3, "count": 0 } }, { 1001: { "size" ...

Chai expect() in Typescript to Validate a Specific Type

I've searched through previous posts for an answer, but haven't come across one yet. Here is my query: Currently, I am attempting to test the returned type of a property value in an Object instance using Chai's expect() method in Typescript ...

Unable to make a reference to this in TypeScript

In my Angular2 application, I have a file upload feature that sends files as byte arrays to a web service. To create the byte array, I am using a FileReader with an onload event. However, I am encountering an issue where I cannot reference my uploadService ...