What is the best way for AngularJS ng-repeat to access the key of an item?

For more information, check out the documentation: https://code.angularjs.org/1.2.26/docs/api/ng/directive/ngRepeat

The ngRepeat directive creates a template for each item in a collection. Each template has its own scope with the current item assigned to the loop variable, and $index representing the index or key of the item.

It appears I am accessing the index instead of the key.


Controller:

$scope.items = {
  "key1" : "val1",
  "key2" : "val2"
};

View:

<div class="item" ng-repeat="(key, value) in items">{{ key }} {{value}}</div>

Result:

key1 val1
key2 val2

http://plnkr.co/edit/0g9EL6kqYcm4jNpdDZ9L?p=preview

I want to display the key, which should be key1 and key2 in this case. Is there a special syntax for that?

Answer №1

Experiment

<section class="element" ng-repeat="(idx, val) in elements">{{ $index }} {{idx}} {{val}}</section>

Answer №2

It should look something like this:

<div class="element" ng-repeat="(index, value) in items">{{ index }} {{ value }}</div>

Check out the live example here: http://example.com

You can also refer to this section in the documentation:

(index, item) in expression – where index and item are arbitrary labels, and expression is the data source being iterated over.

For instance: (fruit, quantity) in {'apples':15, 'bananas':20}.

If you need more information, visit:

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

The event on images is not being triggered by jcarousel

After clicking on the next button, jcarousel is failing to fire events on images. The event is only bound for the initial loading of images. I have included the code I am using to display a preview of the image in the carousel. If anyone could please off ...

Production environment does not support Meteor environment variables

I am currently deploying my app using Meteor UP and I have set the environment variables in both the mup.json file and a file called server/lib/env.js where they are stored. Here is how the variables are being accessed: Meteor.startup(function() { // ...

`json_encode does not output a UTF-8 character`

I send an AJAX request to the PHP server, and receive back an array encoded in JSON. This array has only two indexes. When I log it using console.log(), this is what I see: {"1":"\u00d9\u0081\u00db\u008c\u00d9\u0084\u0 ...

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...

How can you make each <li> in an HTML list have a unique color?

Looking for a way to assign different colors to each <li> element in HTML? <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Here's how you want them displayed: Item 1 should be red Ite ...

Responsive DataTable in Bootstrap 5 automatically hides columns to ensure optimal display on different

Is it possible to create a responsive table using DataTable 1.13.4 and Bootstrap 5.2.3? I encountered an issue while testing the table on a mobile device (using Firefox, not an actual device) where a small horizontal scrollbar appears, causing some columns ...

`Exploring AngularJS scopes with the Batarang Chrome extension`

I am curious about AngularJs scopes and how they can be examined using the Batarang Chrome extension. Here is the HTML I have: <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My A ...

Substitute Symbolic Codes in an Object with Written Text

Here's the structure of the object: { where: { [Symbol(or)]: [ [Object], [Object] ] },hooks: true, rejectOnEmpty: false } When I use JSON.stringify on it, the result is: {"where":{},"hooks":true,"rejectOnEmpty":false} T ...

Disable the submit form in AngularJS when the start date and end date are not valid

I want to ensure that my form submission only occurs if the validation for Start date-End date passes. In my form setup, I have the following elements... <form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> <input t ...

Creating PDFs in iOS and Android using Ionic framework

Seeking assistance with resolving this issue. I have researched extensively on Google, jspdf, pdfmake.org, inappbrowser plugins, but have been unsuccessful in getting my Ionic project to function properly. The goal is to create a simple form that includes ...

How can you center popup windows launched from the main window using jquery?

Within my web application, I frequently utilize popup windows that open at different locations on the screen. These popups are standard windows created with window.open() rather than using Jquery. Now, I am seeking a solution to automatically center all p ...

Developing a search feature using Ajax in the MVC 6 framework

Embarking on a new project, I have chosen c# .net 6 MVC in VS2022... In my previous projects, this code has run flawlessly. @section Scripts { <script type="text/javascript"> $("#Klijent_Name").autocomplete({ ...

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

Using Vuex as a global event bus ensures that all subscribers will always receive notifications for

For a while now, I have relied on a global event bus in Vue - creating it as const bus = new Vue(). It works well, but managing subscriptions can get tedious at times. Imagine subscribing to an event in a component: mounted() { bus.$on('some.event ...

The selected attribute does not function properly with the <option> tag in Angular

Currently, I am faced with a challenge involving dropdowns and select2. My task is to edit a product, which includes selecting a category that corresponds to the product. However, when I open the modal, the selected group/category is not displayed in the d ...

Is the value incorrect when using angular's ng-repeat?

Currently iterating through an array nested within an array of objects like this: <div ng-repeat="benefit in oe.oeBenefits"> <div class="oeInfo" style="clear: both;"> <div class="col-md-2 oeCol"> <img style="he ...

When a user clicks on JavaScript, it will return true if clicked and false if

Currently working with selenium Java code and incorporating JavaScript execution using the executeScript method, as seen below: WebElement menu = driver.findElement(By.cssSelector(string1)); ((JavascriptExecutor) driver).executeScript("arguments ...

Ways to conceal the 'Return to Top' button in a script that is only revealed after navigating to the bottom of the page

Can anyone help me hide the 'Back to Top' button in a script that only appears after scrolling to the bottom of the page? I need to take screenshots without it showing up. I've tried using the code below, but the 'Back to Top' but ...

Implementing Injector Class instead of ReflectiveInjector class is a great way to improve performance

I have been experimenting with dynamic loading data in angular. To achieve this, I initially used the following code snippet - const inputProviders = Object.keys(data.inputs).map(inputName => { return { provide: inputName, useValue: data.inputs[inp ...