Tips for reformatting table row data into multiple rows for mobile screens using ng-repeat in Angular

Just started using Angular JS and I have some data available:

var aUsers=[{'name':'sachin','runs':20000},{'name':'dravid','runs':15000},{'name':'ganguly','runs':18000}]

I want to display this data in a table using ng-repeat.

<table><tr><th>Name</th><th>Runs</th></tr> <tr ng-repeat="obj in aUsers"> <td>{{obj.name}}</td> <td>{{obj.runs}}</td></tr></table>

The expected output is:

Name    Runs
Sachin  20000
Dravid  15000
Ganguly 18000

However, when the resolution is mobile, I would like the view to change to:

Name  sachin
Runs  20000
Name  Dravid
Runs  15000
Name  Ganguly
Runs  18000

I am utilizing Bootstrap for this purpose. Any help in making this work would be highly appreciated!

Thanks, Srinivasa Rao.CH

javascriptangularjs

Answer №1

Replace traditional tables with col classes for better layout flexibility

<div class="row" ng-repeat="item in items">
  <div class="col-sm-6">{{item.title}}</div>
  <div class="col-sm-6">{{item.quantity}}</div>
</div>

Answer №2

Is it possible to place both data points within a single <td> tag?

<table>
  <tr ng-repeat="item in users"> 
    <td>
      <div class="heading">Name</div>
      <div class="info">{{item.name}}</div>
      <br/>
      <div class="heading">Score</div>
      <div class="info">{{item.score}}</div>
    </td>
  </tr>
</table>

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

Explore a vast array of items in a collection

I have a massive collection of various objects that I need to sift through. With over 60,000 elements, the search operation can sometimes be painfully slow. One typical object in this array has the following structure: { "title": "title" "company": ...

javascripttypescriptsearch

Stop iScroll from scrolling the listview filter

I have been working on integrating iScroll into my application using the javascript-jquery.mobile.iscroll plugin. My goal is to apply it to enable scrolling for a listview component on a specific page while keeping the filter fixed just below the header, a ...

javascriptjquerylistviewjquery-mobileiscroll4

Exploring a utility function for saving object information in a dynamic state

Imagine my state was structured like this: state = { customer: { name: { elementType: "input", elementConfig: { type: "text", placeholder: "Your Name" }, value: "" }, street: { e ...

javascriptreactjsformsobject

Incorporating words into the core of a pie chart: Highcharts

Is there a way to display the total value in the center of a pie chart? I've attempted some methods but haven't been successful. The goal is to show the sum of all y values. Input export const data = [ { y: 15, name: "Category 1&q ...

javascriptreactjshighchartsreact-highcharts

PHP file not receiving data when using JavaScript Ajax with a 'post' request and URL

Could you assist me with a problem I am facing? I need help passing variable length HTML or any data to a PHP file via POST using JavaScript AJAX. I want to utilize vanilla JavaScript for my project as I want to gain more experience with it. While jQuery ...

javascriptphpajax

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

I am looking for a solution in javascript that will allow the page to automatically scroll down slightly, but I also want the user to be able to interrupt this scroll. When using jquery for auto-scrolling, if the user begins manual scrolling while the ani ...

javascriptjqueryscrolluser-experience

Encountering an error while trying to run the command "npm run start" due to an issue of "EMFILE

After running npm update, my project start broke. When I try to use npm run start, it returns the following error: 10% building 0/1 entries 0/0 dependencies 0/0 modulesnode:internal/errors:484 ErrorCaptureStackTrace(err); ^ Error: EMFILE: too many ...

javascriptreactjsnpm

There seems to be an issue with Jquery Ajax retrieving information from an ASP.NET WEB API

Recently, I have started delving into APS.NET MVC WEB API programming. My current dilemma involves creating an ASP.NET WEB API project with the following code: public class ValuesController : ApiController { // GET api/values public IEnumerable& ...

javascriptjqueryajaxasp.net-mvc-4asp.net-web-api

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

I'm having trouble creating an expression to validate numbers between 1.0 to 4.5 accurately. The current expression I'm using is not working as intended: /^[1-4]{0,1}(?:[.]\d{1,2})?$/ The requirement is to only allow values between 1.0 to ...

javascriptangularregextypescriptvalidation

Dynamically load select options using Ajax

I'm a newcomer to javascript and ajax, and I'm working on implementing Ajax to display the current category on my HTML select in a CodeIgniter project. Below is the code snippet: HTML: <select class="form-control" name="category" id="categor ...

javascriptphpjqueryajaxcodeigniter

Backend server encountered an issue with processing punycode

[ALERT] 18:13:52 Server Restarting Prompt: C:\Code\MERN_Projects\podify_app\server\src\db\index.ts has been altered (node:22692) [DEP0040] DeprecationWarning: The punycode module is outdated. Consider utilizing a modern a ...

javascriptnode.jstypescriptmongoosepunycode

Check if a user is currently on the identical URL using PHP and JavaScript

In my Laravel and AngularJS project, I have a functionality where users can view and edit a report. I'm looking to add a feature that will prevent multiple users from editing the report at the same time - essentially locking it while one user is makin ...

javascriptphpajaxangularjslaravel

What is the process for invoking a JavaScript function from the code-behind of an Asp.Net application?

Here is a sample of my JavaScript function : function NeedToExport() { alert('Time to export your data!'); } Additionally, in my ASP.NET code behind : Page.ClientScript.RegisterStartupScript(this.GetType(), "ExportKey", "NeedToExport();"); ...

javascriptc#asp.netwebforms

Accessing an item within a JSON object using jQuery

Trying to access an element within a JSON object, part of the code is shown below: { " academy": { "business": { "E-commerce": [ I have successfully accessed the academy as the first element using the following code: $.getJSON("p ...

javascriptjqueryjson

Create a Boxplot chart using Chart.js that dynamically adjusts the minimum and maximum values to allow for additional space on either

I am utilizing chartjs v2.9 for creating a boxplot and my code structure is as follows: function generateRandomValues(count, minimum, maximum) { const difference = maximum - minimum; return Array.from({length: count}).map(() => Math.random() * ...

javascriptjquerychart.js

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

How to automatically set the radio button as "checked" with Javascript upon loading the page

With the dark mode switch javascript from Bootstrap 5 (https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript), I am attempting to ensure that a radio button is set to "checked" when the page loads, as well as when the color mode is changed. ...

javascripttwitter-bootstrapbootstrap-5

How can we show a React JS component when clicked, without using the App.js file for display?

How can I display a component onclick in React JS without using UseState in a file other than App.js? This code will be in App.js var [clicks, setClicks] = useState(false) return( <> {clicks && &l ...

javascripthtmlreactjs

What is the proper procedure for entering data in the correct sequence using JavaScript?

I am currently utilizing Node.js to send data to a SQL Server table. Within the code, there is a for loop that calls a function triggering an insert statement (which will eventually transition to being a stored procedure). This loop iterates through variou ...

javascriptsql-servernode.jsnpm

Unexpected interactions between Socket.io and React using hooks

Currently, I am delving into the world of Socket.io with React utilizing Hooks. My goal is to create a timer that starts upon pressing the start button, and then every second, send the current time in the state to the server using socket.io. The server co ...

javascriptnode.jsreactjssocket.ioreact-hooks