Using ng-repeat to display table data in AngularJS

There is an array with 7 elements, each containing an object. The goal is to display these elements in a table with one row and 7 columns. The desired output should look like this:

   some label1 | some label2 | some label3 | some label4 | some label5 some label6 | some label7
0

JavaScript

 $scope.array = [
  [
    {
      id: 1,
      label: 'some label1'
    }
  ],
  [
    {
      id: 2,
      label: 'some label2'
    }
  ],
  [
    {
      id: 3,
      label: 'some label3'
    }
  ],
   [
    {
      id: 4,
      label: 'some label4'
    }
  ],
  [
    {
      id: 5,
      label: 'some label5'
    }
  ],
  [
    {
      id: 6,
      label: 'some label6'
    }
  ],
  [
    {
      id: 7,
      label: 'some label7'
    }
  ]
];

HTML

<table>
  <tr ng-repeat="item in array"></tr> // this will generate 7 rows
</table>

Answer №1

If you want to display a table with data from an array, you can use the following code:

<table>
  <tr>
    <td ng-repeat="item in array">{{item[0].label}}</td>
  </tr>
</table>

For a working example, you can check out this sample: https://plnkr.co/edit/sYo6YPuMmZ3B9EGhznkS?p=preview

Answer №2

It seems like by converting the array elements into strings and joining them together, you could potentially achieve a solution similar to this:

<div>
  <p ng-bind="variable"/>
</div>

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

Is there a way to securely embed YouTube videos in my web application without exposing the direct video links?

I'm hoping to integrate YouTube videos into my web application, but I need a way to prevent users from accessing the direct video links while they are using the app. Does anyone have any suggestions on how this can be accomplished? I am unsure of how ...

AngularJS | Authorization Needed ngMessage

Can someone help me understand why the required messages are not automatically hidden when a user first views my form? This is what my code looks like: <div ng-messages="loginForm.username.$error" class="form-input-error"> <div c ...

Issue with BCRYPTJS library: generating identical hashes for distinct passwords

After conducting a thorough search on Google, I couldn't find anyone else experiencing the same issue. The problem lies in the fact that no matter what password the user enters, the system returns the hashed value as if it is the correct password. Eve ...

Tips for displaying the initial slide when a tab is loaded on a multi-tab webpage

I have a total of four tabs, with the first tab containing a slideshow. On page load, I am successfully triggering the first tab, but for some reason, the first slide in the slideshow within that tab is displaying a blank image. I'm struggling to find ...

Sync JSON object modifications with the DOM using jQuery (or potentially other libraries)

I am working on developing a web application that would be able to update the HTML elements based on changes in a JSON object. For instance, I have an unordered list with data attributes: <ul data-id="elements"> <li data-id="01">Element 01< ...

Place the `service` parameter into the `run` function

What are some examples of when to utilize the angular.run method? I have a service that is resource-intensive and takes a significant amount of time to initialize before it can be used in conjunction with my view. angular.module('myApp').service ...

In Internet Explorer, the AngularJS multiple select box becomes unselectable when there is a change in the scope

Having an issue with multiple select boxes using AngularJS. Everything works fine in Chrome, but in IE, after changing the scope, I am unable to select anything - it freezes the UI. I have two multiple select boxes where you can select a set from one and ...

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Currently, I am utilizing the WebStorm IDE developed by JetBrains to modify a TypeScript file within a Node.js v8.6.0 project. The JavaScript version set for this project is JSX Harmony. In the beginning of the TypeScript source file, there is an import st ...

best way to eliminate empty strings from an array collection using javascript

I'm currently working on a search functionality where I separate each value in an array, and it's functioning properly. The issue arises when the user enters an empty value, causing the search to break as it returns an empty string within the arr ...

Tips for guiding users to a different page based on whether a linkid is associated with a specific Cat

I created this script, but I am facing an issue with the redirect. Can someone please assist me as soon as possible? <?php include('config.php'); $number = intval($_POST['catid']); $query = mysql_query("SELECT * FROM sound ...

choosing a date from the UICalendar

Recently, I've started exploring Angular and I'm trying to incorporate a calendar feature using ui-calendar. So far, I've managed to display a basic calendar with some events on it. Now, my goal is to allow users to click on a specific day ...

Setting a value programmatically in a Material-UI Autocomplete TextField

In my React application, I am using material-ui Autocomplete and TextField components to allow users to select values from a dropdown list. However, I am looking for a way to programmatically set the input value by clicking a button, without having to choo ...

Is it possible to alter the canvas origin when using an Orthographic camera with a CSS3D

When transitioning the camera from perspective to orthographic, I noticed that the camera's position also shifts so that the coordinates 0,0,0 are situated in the top left corner. Is this expected behavior? Check out this Example for reference. Ortho ...

I am finding the module.export feature in Express JS to be quite perplex

I recently started learning Express JS with the EJS templating engine, using express-generator to set up my project. I only made a few modifications to the initial code. In the directory structure of my app: MyApp->routes->index.js var express = re ...

How can the data from a factory be utilized within the same controller but in a separate file in an AngularJS application?

When trying to route from home.html to profile.html, there seems to be an issue with the execution of the profile.js script. I have data in script.js that is written in a factory. When the profile button is clicked, the page routes to profile.html, but the ...

How to make a JQuery list item unselectable when appending it

I encountered a strange issue while using jQuery to append items to a list. <ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all"> <li id="NicheItem_1"> Item 1</li> <li id="NicheItem_2"> Item 2</li& ...

Running a JavaScript script within MongoDB

Seeking guidance on running a JavaScript file within MongoDB. Here is a snippet of code from my JS file: function loadNames() { print("name"); } My attempt to execute the file from the command prompt: mongo test.js resulted in the following error: ...

Error: Unexpected token : encountered in jQuery ajax call

When creating a web page that requests remote data (json), using jQuery.ajax works well within the same domain. However, if the request is made from a different domain (e.g. localhost), browsers block it and display: No 'Access-Control-Allow-Or ...

Saving the state of checkboxes in Angular Material

I am trying to figure out a solution for storing checkbox values, specifically whether they have been checked before or not. For example, I have this dialog: https://i.sstatic.net/c16Ju.jpg After clicking on a checkbox and then clicking Save, the checkbox ...

Utilizing JavaScript to retrieve data from a self-submitting form

From my database, I am able to create a list of options for users to choose from. Once a selection is made, the values are submitted back to the same page and retrieved using Javascript. Within the same form, there are radio buttons and a multiple selecti ...