How to flip the order of objects in ng-repeat using AngularJS

After uploading an excel file, my program reads it out in reverse order. However, I am facing a challenge with ng:repeat as it does not display the objects in reverse order within the Array of Objects.

https://i.sstatic.net/WWCD1.png

This is how the excel spreadsheet appears

https://i.sstatic.net/lwylF.png This is the current output

   <table class="table table-striped table-bordered">
        <tbody>
            <tr ng:repeat="row in sheet.sheet">
                <td ng:repeat="cell in row | orderBy : sortingOrder : reverse" ng:bind="cell"></td>
            </tr>
        </tbody>
    </table>

This is a visual representation of the array of objects from the console

https://i.sstatic.net/SP3dK.png

javascriptangularjs

Answer №1

give this a shot

<div class="content-container">
    <p>Here is a sample code snippet for you:</p>
    
    <table class="table table-striped table-bordered">
        <tbody>
            <tr ng:repeat="row in sheet.sheet">
                <td ng:repeat="cell in row | orderBy : expression : reverse" ng:bind="cell"></td>
            </tr>
        </tbody>
    </table>

    <p>Feel free to customize the expression based on your scope object</p>
</div>

experiment with different expressions to see how they affect the output

Answer №2

After some experimenting, I discovered that it was simpler to change the entire table's direction using CSS! Huge thanks to everyone who assisted me!

#container { direction: rtl }

This method proved to be a more straightforward solution compared to rearranging objects into an array.

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

Unable to click on the icon when modifying Mui Text Field

Utilizing the MUI Text Field component, I have successfully added a select prop to transform it into a dropdown list with values and an icon. However, I encountered an issue while attempting to change the default dropdown icon to a custom one from Figma. D ...

javascriptreactjsmaterial-ui

What is the best way to choose a distinct element from an array?

I've been working on a task to identify the unique element within an array. I've made progress and managed to solve 95% of it, but I'm encountering an issue with one particular situation. The error message reads 'expected 0 and got 1&ap ...

javascriptarrayssortinguniqueelement

Whenever I initiate an AJAX call, my form submits automatically

I have designed a form that sends a list of products to the spring backend. This form consists of two separate buttons: A "Submit" button for submitting the form. A "Fetch available Stock" button for checking stock availability. When the "Fetch available ...

javascriptspring-mvcbootstrap-4

Issue with Nuxt: Property accessed during rendering without being defined on the instance

As I attempt to create cards for my blog posts, I encountered an issue with a Post component in my code. The cards are displaying like shown in the picture, but without any text. How do I insert text into these cards? Currently, all the text is within attr ...

javascripttypescriptvue.jsnuxt.js

Creating an Extjs model for a complex nested JSON structure

Take a look at this JSON structure { "id": 123, "name": "Ed", "orders": [ { "id": 50, "total": 100, "order_items": [ { "id": 20 ...

javascriptjsonextjssencha-touch

Identifying the presence of a tag in Vue.js

Check out my Code: <template v-for="day in getMonthLength()" > <td :id='notempty' v-for="dataa in data" v-if="dataa.employee_id === employee.id"> <input type="numb ...

javascriptvue.js

sending a JSON object or array to the client along with a displayed view

My current controller code looks like this: public function index() { $trainers = $this->trainer->with('user.images', 'types')->get(); return View::make('trainers.index') ->with('trainers&apo ...

phpjsonangularjslaravel-4

What is the best way to arrange elements in my DOM if they are not being repeated in AngularJS?

I am currently working with a controller that contains two distinct controllers: one for the users model and one for the classes model. I want these sections to be displayed on top of each other based on the order in which they were opened. For example, i ...

javascriptjqueryangularjs

Transfer a session ID cookie generated by express-session to a React front end on a different domain

I am currently developing a web application. The back end of my app is built using Node.js and Express.js, with a specific focus on utilizing the express-session module for implementing session-based authentication to maintain user logins. I understand tha ...

javascriptreactjsexpresssession-cookiesmern

Exploring an array to retrieve a specific value

Can someone assist me? I am looking to create a JavaScript function that follows the structure of the code example below. Unfortunately, I do not have enough programming skills to develop a functional solution from scratch. The goal is to input a value, ...

javascriptarraysmultidimensional-array

Avoiding Overlapping in Recharts Scatter Plot

I am encountering an issue where the data I'm inputting into recharts is not overlapping, instead it is being stacked horizontally. This "stacked" data all has the same date on the x-axis and the same count on the y-axis. What I actually want is for t ...

javascriptreactjsrecharts

Add up unique values in MongoDB

Document layout { "_id": "5a21c5dff772de0555480ef5", "date": "2017-10-06T00:00:00.000Z", "amount": 1, "location": "Canada", "__v": 0 } I am looking to calculate the total amount for each location and presen ...

javascriptmongodbmongoose

Sorting the Czech alphabet with the help of Tablesorter

Utilizing the tablesorter characterEquivalents extension as outlined in this documentation. I have created a similar extension for Czech characters, but the sorting is not functioning correctly for certain characters - like \u017d $.extend( $.tables ...

javascriptjquerytablesorternon-english

Exploring the multi-page game interface in Asp.net - Seeking advice and direction

I am in the process of developing the game page for my quiz project using asp.net. I have already implemented all the game logic on the server-side. The game is a quiz that involves user response timing, scoring based on correct answers and timing. It is ...

c#javascriptjqueryasp.netajax

Issue with cloning InvokedOn text from the context menu

Check out my fiddle at http://jsfiddle.net/X9tgY/1526/ The following line of code is not functioning correctly: $(selectedText).clone().insertAfter(selectedText); When I right click on the HTML text, I am able to retrieve the HTML of the invokedOn text ...

javascriptjquery

Experiencing difficulties with the hamburger menu dropdown not displaying

Currently, I'm working on creating a mobile collapsible navigation bar. When the screen size is reduced, the items in the navbar disappear and are replaced by a hamburger button with a dropdown menu containing the previously hidden items. I've be ...

javascripthtmltwitter-bootstrap

Displaying data from asynchronous functions in Vue.js

As a beginner in VueJs, my goal is to develop a basic application that fetches text from a Wikipedia page and displays it upon clicking a button. Code <script> const wiki = require('wikipedia'); export default { data() { sum:&q ...

javascriptvue.jsvuejs3

Angularjs failing to display data from $rootscope

I encountered some issues while working on a project. Specifically, I faced a problem with the header not allowing me to receive a response, similar to a CORS issue. I was able to resolve this by adjusting the header and using transformRequest as shown in ...

javascriptangularjsnode.jsangular-ui-routerionic-framework

Tips for adding a "Select All" feature to a dropdown list?

Currently, I have a dropdown list with a filter for IN and OUT values. The functionality is working as expected: <select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeT ...

javascriptangulartypescript

How can I add header and footer elements in dot.js template engine?

My understanding was that all I needed to do (as per the documentation on GitHub) was to insert {{#def.loadfile('/snippet.txt')}} into my template like this: <!DOCTYPE html> <html> <head> <meta charset=&a ...

javascriptnode.jstemplate-enginedot.js