Obtaining the specific array index within an ng-repeat directive

Suppose I have an array named "stuff" with the following elements

$scope.stuff = [
    {name: "one", order: 1},
    {name: "three", order: 3},
    {name: "two", order: 2}
]

When I use ng-repeat to display it:

<div ng-repeat="(key, data) in stuff | orderBy:'-order'">
    {{ data.name }} - {{ key }} - {{ $index }}
    <br />
</div>

The output will be:

1 - 0 - 0
2 - 1 - 1
3 - 2 - 2

I want to know the original position of each item in the actual array $scope.stuff, not just its index in the sorted ng-repeat.

As a beginner in Angular, can anyone provide suggestions on how to achieve this?

Answer №1

Utilizing ng-repeat may not provide the necessary functionality, so I turned to the array indexOf method to obtain the desired index.

<div ng-repeat="(key, data) in items | orderBy:'-priority'">
    {{ data.name }} - {{ key }} - {{ $index }} - {{items.indexOf(data)}}
    <br />
</div>

http://plnkr.co/edit/xjTZ6Y3xFqs6Bs3LGJk9

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

What is the method of using "*" as the value for allowedModules in a jsreport configuration file to enable all modules?

I am having an issue when trying to generate a report using jsreport STUDIO. The error message I received is as follows: An error occurred - Error during rendering report: Unsupported module in scripts: request. To enable require on a particular module, ...

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

What causes adjacent elements in an int array to change when a number is appended in Golang?

I've been working on solving dynamic programming problems using Golang. One of the functions I wrote looks like this: func main() { fmt.Println(HowSum(5, []int{1, 2, 5})) } func HowSum(targetNum int, numbers []int) []int { retAry := make([][]in ...

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

Tips for incorporating confidence intervals into a line graph using (React) ApexCharts

How can I utilize React-ApexCharts to produce a mean line with a shaded region to visually represent the uncertainty of an estimate, such as quantiles or confidence intervals? I am looking to achieve a result similar to: ...

Steps to efficiently enumerate the array of parameters in the NextJS router:

In my NextJS application, I have implemented a catch all route that uses the following code: import { useRouter} from 'next/router' This code snippet retrieves all the parameters from the URL path: const { params = [] } = router.query When I co ...

Access the child component within an @ChildComponent directive in Angular

Is it possible to retrieve child components of another component? For instance, consider the following QueryList: @ContentChildren(SysColumn) syscolumns: QueryList<SysColumn>; This QueryList will contain all instances of the SysColumns class, which ...

Center a span vertically inside a div as the text within the span grows to occupy the entire div

I am facing an issue with a table that has 25 td's. Each td contains specific elements as shown below: <td> <div> <span> text </span> </div> </td> Additionally, there is a script in place that adj ...

Identifying the HTML elements beneath the mouse pointer

Does anyone know the method to retrieve the HTML tag located directly under the mouse cursor on a webpage? I am currently developing a new WYSIWYG editor and would like to incorporate genuine drag and drop functionalities (rather than the common insert at ...

Interacting with jQuery through live events and handling callbacks when using WCF services

Currently, I am developing a web application using asp.net, c#, and jquery. The majority of my work involves generating dynamic HTML content for the browser and utilizing various web services to fetch the necessary data. One of my service calls looks like ...

Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...

Performing correlation calculations using complex for loops in MATLAB

The code I currently have is functional up to the point of ------ separation. Beyond that, Matlab does not return any errors, but it also does not provide values for bestDx or bestDy. Assistance with this issue would be greatly appreciated. (The precedin ...

Utilizing async parallel for executing multiple queries

Hey there, I'm new to Javascript and I've been trying to work with the async.parallel function. I have a specific task where I am fetching data from my database and storing it in an array called "reviewArr." Then, I want to return this array of ...

Is it acceptable to compare a boolean with a string?

In my code, I have a variable called isRefreshed which is initially declared like this: var isRefreshed = ''; Sometimes, in certain scenarios, isRefreshed can be assigned a boolean value, for example: isRefreshed = false; Now, there is an if ...

Incorporating JS objects into HTML: A comprehensive guide

Here is a snippet of code from my JavaScript file: var formStr = "<h5>How many books?:</h5><input type='number' id='bookinput' value='' /><input type='button' value='submit' onclick=& ...

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Upon encountering the following code snippet: var deferred = Q.defer(); deferred.resolve(); var a = deferred.promise.then(function() { console.log(1); }); console.log(2); I am puzzled as to why I am seeing 2, then 1 in the console. Although I ...

Waiting for all API queries in VueJS is important to ensure that all data has been

Hey there, I currently have an API set up using Django Rest Framework and the front end is built with VueJS. I have a form view that can either be used to Add New or Modify existing data. The structure of the form remains the same, but it checks if an ID ...

What is the process for establishing Many-to-Many connections with personalized field titles using Bookshelf.js?

I am interested in setting up a many-to-many relationship using Bookshelf.js and I would like to customize the names for the foreign key columns. Additionally, I want to have access to the helper table in Bookshelf just like in the example below: var Phys ...

Submission error in Ripple-lib: 'UnhandledPromiseRejectionWarning - DisconnectedError: not opened'

I'm encountering an issue while trying to send Ripple XRP using ripple-lib and rippled server. Whenever I submit the signed payment object, I receive an error message stating: UnhandledPromiseRejectionWarning: DisconnectedError: not opened. Below is ...

Invoking a jQuery request to a C# API endpoint

I have recently embarked on a project utilizing ASP.NET MVC and JavaScript/jQuery. I am facing an issue where my API call to the controller using $.ajax function always returns a 404 error. Despite researching and trying various solutions, I continue to en ...