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

React Type Mutation response feedback is a valuable tool for receiving input

I am facing an issue with passing the mutation success response in my code. I have a file named change-email.tsx which calls a component file updateEmail.tsx containing a mutation function. The submit function is working fine, but I cannot figure out how t ...

javascriptreactjstypescriptreact-native

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

jquerycssangularjstimepicker

What is the best way to incorporate this code snippet into an object's value?

Is there a way to merge the headStyles object into the headText object? I have already injected the headStyles object into headConfig. import { makeStyles } from '@material-ui/core' const headStyles = { backgroundColor:'green', ...

javascriptreactjsobjectmaterial-uikey-value

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

javascriptjquerycssangularjssafari

Leveraging JSON Data for Dynamic Web Content Display

I have been attempting to parse and display the JSON data that is returned from a REST API without any success. When tested locally, the API's URL structure is as follows: http://localhost/apiurl/get-data.php It returns data in the following format ...

javascriptjqueryjsonrestapi

What causes the difference in behavior of nodejs function arguments when explicitly called?

As I refactor my nodejs application to improve code readability, I encountered an issue when calling a function directly. The following code works perfectly: router.route('/').get(({ query }, res, next) => { ItemsLogic.getItems(query) .the ...

javascriptnode.jsexpresspromisees6-promise

Testing Vue Components - Simulating the return value of a plugin

I have a unique scenario where I need to mock the return value of a custom plugin without importing it directly into my test. By creating a mock function for the plugin, I can easily achieve this goal. However, I am unsure how to change the return value of ...

javascriptunit-testingvue.jsvue-test-utils

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

I'm working on an application that requires Html5 Drag and Drop functionality, which is currently functioning well. However, in the app, there may be instances where a dropped item is no longer needed and I want to allow users to re-drag and drop it b ...

javascriptjqueryhtml

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

Retrieve a boolean value through an Ajax call from a C# function using T4MVC

I have a search bar on my website with the following code: <form onsubmit="return IsValidCustomer()"> <input class=" sb-search-input" placeholder="Search for a customer..." type="text" value="" name="search" id="search"> <input cl ...

javascriptc#jqueryajaxforms

Can a snapshot be taken of an auto-generated ID document in FireStore?

Currently, I am working on developing both a mobile app and web app for my Final Year Project. As someone relatively new to Firestore, I am using a single instance of it to store data. When a customer registers through the mobile app, their information ge ...

javascriptfirebasevue.jsgoogle-cloud-firestore

What is the process of displaying JSON response data in AngularJS?

I am attempting to retrieve URL information using get_meta_tags in Laravel and then display it in my AngularJS application. However, the issue is that the response is returned in the following format: Array ( [title] => Mercy Badshah Full HD [d ...

angularjsjsonangularjs-scope

Struggling with integrating PHP within a JavaScript AJAX function

Here's a button I have: <button id= $id onClick="popup($id)">button</button> I am attempting to use it with an ajax function <script> function popup(id){ alert(" "); document.write(" "); } </script> My goal is to execute P ...

javascriptphp

Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option: swal({ title: "HTML <small>Title</small>!", text: "A custom <span style="color:#F8BB86">html<span> message.", html: true }); Instead of just text, ...

javascripthtmlcsssweetalert

Loading Java Script files in real-time

Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...

javascriptjquery

Reactive form allows you to easily format dates

Currently, the date displayed is 1/4/2022. We need it to display in the format 01/04/2022. Can we achieve this formatting using reactive forms with the sample Model form provided below? Thank you. How can we format it when starting from transactionStartD ...

javascriptangulartypescript

Using Node.js to convert a file name to a timestamp

I need to change a filename into a timestamp in my Laravel application. let test = "/2020-05-16_11-17-47_UTC_1.jpg" I attempted using split and join to replace the -, but I don't believe it's the most efficient method. The desired output should ...

javascriptnode.js

What makes using setInterval with a self-invoking function a smarter choice?

I recently came across an explanation on how to properly use the setInterval() function. Essentially, it was mentioned that (function(){ // perform some actions setTimeout(arguments.callee, 60000); })(); ensures that the subsequent call from setTim ...

javascript

Incorporate socket.io into multiple modules by requiring the same instance throughout

I am feeling a bit lost when it comes to handling modules in Node.js. Here's my situation: I have created a server in one large file, utilizing Socket.io for real-time communication. Now, as my index.js has grown quite big, I want to break down the ...

javascriptnode.jssocketsmodulesocket.io