angularjs ng-repeat utilizing the index instead of names

Using ng-repat to populate an HTML table with an array has been causing some naming normalization issues for me.

Dealing with stubborn users, I am now in search of a quick workaround.

Sometimes my array AgendaItems appears as:

{"Agenda Item":"1","Legistar ID":"62236","Title":"Approval of Minutes","Meeting ID":"49837"}

And other times it looks like this:

{"AgendaItem":"1","LegistarID":"62236","Title":"Approval of Minutes","MeetingID":"49837"}

In the HTML code:

                    <tbody ng-repeat="ai in AgendaItems">   
                        <tr>
                            <td>{{ai.MeetingID}}</td>
                            <td>{{ai.AgendaItem}}</td>
                            <td>{{ai.LegistarID}}</td>
                            <td>{{ai.Title}}</td>
                        </tr>
                    </tbody>

Wondering if there is a way to use index value instead of specific property names like ai.[i]. This would eliminate concerns about spaces between column names.

Your assistance on this matter is greatly appreciated.

Thanks, Erasmo

Answer №1

When using ng-repeat, you have access to scope properties like $index which are automatically provided by the directive.

It is important to note that using $index when iterating over an object instead of an array might not be the best approach.

If your goal is to iterate over an object's keys and values, it is recommended to use the

"(key, value) in object"
syntax supported by ng-repeat. The names key and value can be changed as needed.

Here is how you can implement this:

Firstly, for a single agendaItem, ai

<div>
  <div ng-repeat="(key, value) in ai">{{key}}: {{value}}</div>
</div>

Secondly, in the context of the question

<tbody ng-repeat="ai in AgendaItems">
  <tr>
    <td ng-repeat="(key, value) in ai">{{value}}</td>
  </tr>
</tody>

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

Eliminate an array's multiple values

Presented here is an array that contains various values: array(5) { ["destino"]=> string(11) "op_list_gen" ["id_terminal"]=> string(0) "" ["marca"]=> string(2) "--" ["tipo"]=> string(2) "--" ["lyr_content"]=> string ...

Issue with implementing autocomplete using AJAX and PHP for multiple input fields

HTML code: <table> <tr> <td align="center"> <label for="InputBox1"><b>~</b><font color="red">*</font>: &nbsp;</label> </td> </tr> <tr> <td align="center"> <div id="1"> ...

React JS Material UI disabled button under control

I am looking for some guidance. I am working on a feature where I need to disable a button conditionally. The idea is that if something is selected from my table, then the button should be available; otherwise, it should be disabled. MUI requires a boolean ...

`Error: Array index exceeds limit`

I'm currently learning how to use processing and working on a project that involves filling a 600px by 600px canvas with 50px rectangles of random colors from my orange[] palette. The random arrangement of blocks needs to be implemented within the dra ...

"Ensuring Data Accuracy: Validating WordPress Fields with JavaScript

Can anyone provide assistance with this? I've been struggling for some time now. I am in need of a JavaScript code that can compare two fields in a contact form to ensure they match. For example, Phone Number and Phone Number Again. Both fields must ...

What is the best method for returning the AJAX outcome to the JSP page?

Using AJAX, I am able to post data from my JSP page to my servlet. $.ajax({ url: 'myServlet?action=FEP', type: 'post', data: {machine: i, name: txt}, // where i and txt hold certain values success: f ...

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...

How can parameters be implemented in Angular similar to NodeJs Express style?

Is there a way to implement a Parameter in Angular routes that resembles the NodeJs style? I have a route like **http://myhost.domain.com/signin**" and I want to pass an id for the signin request. Although I can achieve this using **http://myhost.doma ...

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Currently, I am utilizing the jQuery [Datepicker][1] on a website, but I am facing challenges when attempting to display two datepickers on the same page in different manners. The first one should only appear once you click the text box, and once a date i ...

Accessing a jstl variable within javascript script

I need to access a JSTL variable within a JavaScript function. The JavaScript code submits a form. $("#userSubmit").on('submit', function () { document.getElementById("userForm").submit(); }); In the server-side code - request.setAttribu ...

Error validation for jQuery div dropdown

Can jQuery validation be used to set the required attribute on a Bootstrap styled div dropdown instead of an option/select tag? The tags cannot be changed on this page, and there are multiple div dropdowns. <div class="btn-group"> <button typ ...

Issue with AngularJS AJAX Request

When working with AJAX calls, how can we improve error handling to make it more meaningful? Using the template code provided may not effectively communicate the issue. What are some ways we can better understand and handle exceptions? <script> ...

The event failed to initiate

I have an event that is fired when the number value changes in the <input type="number"> below: <input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1"> <input type="button" class="minus" value=" ...

Filtering nested objects in JavaScript based on a specific property value

I have a list of objects nested in JavaScript and I need to filter them based on a specific search string and property value. My goal is to extract only the categories with children that are not hidden and contain at least one profile with a name matching ...

What causes the 'cannot read properties of null' error when using dot notation in React, and what are the possible solutions to resolve it?

When I employ the conventional method of accessing objects using dot notation {quote.text} {quote.author}, I encounter a "cannot read properties of null" error message. import { useState, useEffect } from 'react'; import "./React.css"; ...

JavaScript-powered dynamic dropdown form

I need help creating a dynamic drop-down form using JavaScript. The idea is to allow users to select the type of question they want to ask and then provide the necessary information based on their selection. For example, if they choose "Multiple Choice", t ...

Tips for storing unique values in an object using JavaScript

I need assistance with organizing my log data, which includes camera names and system IP addresses. I am trying to create an object where each unique system IP is a key, with an array of corresponding camera names as the value. Here is the code snippet I h ...

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

Issues with the update of class properties in Node.js using Express

I am facing some challenges with a .js Object's attribute that is not updating as expected. Being new to the world of JavaScript, I hope my problem won't be too difficult to solve. To begin with, here is a snippet from my Node class: Node = fu ...

Creating a nearly sorted list with 2**20 elements in Python: A Step-by-Step Guide

Given N=2**20, the list A is constructed in such a way that each element A[i+1] is equal to A[i] plus a random value between 1 and 5. Following this, N//20 elements are moved to a random position within the list. This is the code I have written so far: im ...