Utilize AngularJS's OrderBy feature to iterate through the list for navigation in ascending order by Index

Question

Utilize AngularJS's OrderBy feature to iterate through the list for navigation in ascending order by Index

I am looking to customize the order of an Object-array using ng-repeat based on their index keys in ascending order.

$scope.paneContainer = {books:[{}] } ;  
$scope.paneContainer.books[0].science = { title:"science", content:"web/app/views/partials/science.html"  };
$scope.paneContainer.books[0].alphabets = { title:"alphabets", content:"web/app/views/partials/alphabets.html"  };
$scope.paneContainer.books[0].folks = { title:"folks", content:"web/app/views/partials/folks .html" };

Implementation on the front end:

<ul class="ui-tabs-nav">
    <li ng-repeat="tab in paneContainer.books[0] track by $index | orderBy:$index " class="">
        <strong>{{tab.title}}</strong></a>
    </li>
</ul>

The expected output should be:

Science

Alphabets

Folks

Currently, Angular arranges the list alphabetically.

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

As Mike mentioned, the concept of order does not inherently apply to objects. If you prefer not to convert it into an array (although that is typically the simplest and most effective solution), you can instead add a displayOrder property to the object and then utilize a filter to organize it by displayOrder.

angular.module('app').filter('orderByDisplayOrder', function () {
    return function (obj) {
        var array = [];
        Object.keys(obj).forEach(function (key) {
            array.push(obj[key]);
        });
        array.sort(function (a, b) {
            return a.displayOrder - b.displayOrder;
        });
        return array;
    }
});

You can then apply this filter for sorting purposes.

<ul class="ui-tabs-nav">
<li ng-repeat="tab in paneContainer.books[0] track by $index | orderByDisplayOrder" class="">
    <strong>{{tab.title}}</strong></a>
</li>

Answer 2

As Mike mentioned, the concept of order does not inherently apply to objects. If you prefer not to convert it into an array (although that is typically the simplest and most effective solution), you can instead add a displayOrder property to the object and then utilize a filter to organize it by displayOrder.

angular.module('app').filter('orderByDisplayOrder', function () {
    return function (obj) {
        var array = [];
        Object.keys(obj).forEach(function (key) {
            array.push(obj[key]);
        });
        array.sort(function (a, b) {
            return a.displayOrder - b.displayOrder;
        });
        return array;
    }
});

You can then apply this filter for sorting purposes.

<ul class="ui-tabs-nav">
<li ng-repeat="tab in paneContainer.books[0] track by $index | orderByDisplayOrder" class="">
    <strong>{{tab.title}}</strong></a>
</li>

Utilize AngularJS's OrderBy feature to iterate through the list for navigation in ascending order by Index

Answer №1

Similar questions

Storing data retrieved from an asynchronous call in AngularJS to a variable

Adding elements to a list using the appendChild method

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

The initial ajax request successfully connects to the file, but encounters a 404 error upon the second attempt

Creating a flexible image layout within a container with relative positioning

Reload Popup Box

Identifying whether a child component is enclosed within a specific parent using React

Eliminate the need for background video buffering

Firefox experiencing trouble handling flexbox overflow

Error: An unexpected identifier was found within the public players code, causing a SyntaxError

Invisible and Unrestricted automatic playback

Electron's start script leads to project failure

Enable automatic full-screen mode on Google Chrome upon page load

What is the best way to display a JavaScript loop on a webpage instead of just in the console?

Tips for iterating through/range over an array depending on the initial point?

ng-if directive does not show data in AngularJS

What's with the lack of acknowledgment when I triumph in rock, paper, scissors, lizard, spock?

Creating directional light shadows in Three.JS: A Step-by-Step Guide

AngularJS - Issue with retrieving the most recent entry during $routeChangeStart event