Ordering items in Angular-js ng-repeat using a complex orderBy function

------- Updated query -----

I am struggling with implementing the orderBy function along with limitTo:

Here is an example:

orderBy id limitTo 1

'adam1@xxx' - id:10

'adam2@xxx' - id:20

'adam3@xx' - id:16

Then, I need to reorder by id again:

'adam1@xxx' - id:10

'adam3@xx' - id:16

'adam2@xxx' - id:20

Link to a relevant JSFiddle

function MyCtrl($scope) {
    $scope.limit = 1;
    $scope.itemsMsg = [
        {
        'adam1@xxx': [{
            id: 10,
            content: 'test1',
            cod: 25
        }, {
            id: 11,
            content: 'test2',
            cod: 13
        }, {
            id: 12,
            content: 'test3',
            cod: 10
        }]
    }, {
        'adam2@xxx': [{
            id: 20,
            content: 'test4',
            cod: 24
        }, {
            id: 21,
            content: 'test5',
            cod: 23
        }, {
            id: 30,
            content: 'test6',
            cod: 20
        }]
    }, {
        'adam3@xx': [{
            id: 16,
            content: 'xxx',
            cod: 1
        }]
    }];
    
 
    
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="item in itemsMsg">
        <ul ng-repeat="(key, value) in item">
            <li ng-repeat="obj in value | orderBy:id | limitTo: limit">{{obj.id}} :{{obj.cod}} : {{obj.content}}</li>
        </ul>
    </div>
</div>

Answer №1

Here is a suggestion for sorting data in a specific order:

<div ng-repeat="item in itemsMsg | orderBy:['id','code']"></div>

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

Moment JS initialization and the utc() function

I am trying to comprehend the way Moment JS initializes its moment object. For instance, let's say I want to create a moment for the date and time: April 1, 2000, 3:25:00 AM with a UTC offset of +8 hours from UTC/GMT. To represent this in JavaScript ...

React/Express: Error 413 encountered when posting due to payload size exceeding limit and Bodyparser failing to handle it

I've exhausted all options but this issue seems unsolvable. I have scoured every single suggested fix on stackoverflow and gone through 3 pages of Google search results. Methods I've attempted Inserted extended: true/false in bodyParser.json U ...

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

Utilizing query parameters during the on-load event in AngularJS

Upon loading my AngularJS app, I aim to extract query parameters (http://myurl/?params=Resource1,Resource2,Resource3) from a URL and retrieve JSON resources based on these parameters (e.g., Resource1, Resource2, Resource3). Subsequently, once the three res ...

The Node script remains active even after all setTimeout functions have completed

I have a script that updates the passwords of all existing Firebase Authentication users we use for testing purposes to reset them to a "clean" state. var admin = require('firebase-admin'); // Input args var jsonKey = process.argv[2]; var proje ...

Difficulty in selecting an item from a list of array

Encountering an issue when attempting to create a custom select drop-down list. When utilizing an array list in the map(), everything functions correctly. However, upon pressing enter, an item in the input field appears as [object Object]. Despite numerous ...

Deactivate the buttons within a div by utilizing the ng-disabled directive

Is it possible to create a div with multiple buttons and a main button, then disable the entire div when the main button is clicked? <body ng-app> <div ng-disabled="disableDiv"> <input type="button" value="btn1 ...

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

Here is the code snippet I am working with: <template> <div> <ul v-if="list.length !== 0"> {{ list }} </ul> </div> </template> < ...

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

I have a navigation sidebar that includes nested v-list-groups. Based on the documentation, the "group" prop of v-list-group should expand based on the route namespace. To see more information, visit: https://vuetifyjs.com/en/components/lists/ While this ...

Exploring the functions of JointJS within a Node.js environment

I am a beginner in using JavaScript, JointJS, and Node.js. I am currently working on a Node.js project in WebStorm, and the file structure looks like this: /test /bin www /node_modules /public /routes index.js users.js /views error.jade ...

My website code being stored in cache by Chrome (as well as other browsers)

Issue: I am facing an issue with hosting a widget on my client's website where the widget needs to be different for each page. To display the widget, the client embeds a script tag on their pages. This script is loaded on every page and the content ...

Issue with repeated items in Flatlist

Whenever I display my flatlist, it appears to be duplicating the items within it (the feedCache has only one index but the data for this index is rendered twice). Below is the code snippet for the flatlist: const FeedBody = React.memo(() => { return ...

When using Angular, the function `$window.location.assign` does not properly load within a controller when trying to

After implementing $window.location.assign('#/someurl'); in a controller, the URL hashtag updates but fails to load. .when("/signin", { templateUrl: templateSource+"/signin", controller: function($scope, $location, $window){ ...

utilizing ng-repeat in Angular to store expressions as variables

I'm attempting to achieve something similar to the following: <ul> <li ng-repeat="{{myRepeatExpression}}">{{row.name}}</li> </ul> However, because the logic of ng-repeat is in the compile state of the directive, it interp ...

Tips for permitting the "checking" of just a single checkbox

Is it possible to customize this codepen so that only one item can be checked at a time, with the ability to automatically uncheck the previous item when a new one is checked? Also, is there a way to use a custom image for the check mark instead of the d ...

Guide on importing a 3D .obj model in three.js

As a beginner in three.js, I have successfully created a 3D obj model file. Now, I am facing the challenge of returning the object(3D .obj) to another function and making sure the original color is visible on the .obj 3D model. Javascript this.draw3 ...

The task of mapping an array of objects with nested values using JavaScript is proving to

Attempting to convert an array of objects with nested values in child objects like: const objs = [{ "B": { "value": 1, }, "D": { "value": "45" }, "E": { "value": "234" }, ...

Issue with Jquery Fly To Cart Animation on Mobile Devices

On desktop view, I successfully added a 'fly to cart on click' function, but when switching to mobile view, it flies to the left side of the screen where my cart icon is not located. It essentially flies to the 'hamburger menu.' I' ...

Switching between classes using jQuery

I'm working on implementing a play and pause button for a video, and I'm facing an issue with switching the class when the button is pressed. What I want is that when the pause button is clicked, the class changes to something else, and vice vers ...

Using Angular's ng-style directive to implement multiple conditional outputs beyond just two

There are 3 conditions that determine my text style: Condition 1: color should be green Condition 2: color should be blue Condition 3: color should be red Therefore, there are 3 possible outputs for the same style (color). I have formulated ...