arrange data within an angular ng-repeat

I'm facing a bit of a challenge with Angular since I'm still new to it. My data looks like this:

$scope.datas =[
    {name:'haha',datetime:'2015-06-06 09:24:34'},
    {name:'taha',datetime:'2015-07-06 19:10:45'},
    {name:'gaga',datetime:'2015-06-06 15:36:14'},
    {name:'lala',datetime:'2015-07-06 04:43:24'}
]

Now, I want to use ng-repeat to display the data in a table format as follows:

<table>

<tr><td colspan="2">2015-06-06</td></tr>
<tr><td>09:24:34</td><td>haha</td></tr>
<tr><td>15:36:14</td><td>gaga</td></tr>

<tr><td colspan="2">2015-07-06</td></tr>
<tr><td>19:10:45</td><td>taha</td></tr>
<tr><td>04:43:24</td><td>lala</td></tr>

</table>

Any suggestions on how I can achieve this?

javascriptangularjs

Answer №1

Alright, after putting in some effort into this, I believe I have a solution for you.

Like mentioned before, the controller needs to split the date and time, which is not too complex. Your data structure should resemble this:

$scope.datas =[
    {name:'haha',date:'2015-06-06', time: '09:24:34'},
    {name:'taha',date:'2015-07-06', time: '19:10:45'},
    {name:'gaga',date:'2015-06-06', time: '15:36:14'},
    {name:'lala',date:'2015-07-06', time: '04:43:24'}
];

Subsequently, your HTML markup should be structured as such:

<table>
    <tr ng-repeat-start="(key, value) in datas | groupBy : 'date'"><td colspan="2">{{key}}</td></tr>
    <tr ng-repeat-end ng-repeat="time in value">
        <td>{{time.time}}</td><td>{{time.name}}</td>
    </tr>
</table>

There are two important aspects to note: firstly, you will need to install the array-filters module using the command `npm install array-filter` and include it in your script dependencies. Secondly, utilize the ng-repeat-start and ng-repeat-end markers to repeat multiple elements rather than just a parent element. It's advisable to test this on larger datasets, but from my testing, it achieves the desired outcome.

Answer №2

To properly display your data, start by separating the date and time fields before binding it to the desired columns. You have options like utilizing ng-model or using double curly brackets "{{ data field }}" for displaying the data. Learn more about data binding

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

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

As a beginner in this realm, I must apologize if my query seems naive. I recently crafted a multiple-choice quiz using HTML, CSS, JavaScript (angular.js), and a JSON data file following a tutorial I stumbled upon. The outcome pleased me, but now I am face ...

javascripthtmlcssangularjsjson

Transmit data to PHP servers

When the button in my HTML is clicked, it should trigger a query in a PHP file that will display the results. However, the button does not seem to be working as expected. What could be causing this issue? Here is the code I have tried: <?php $reply_ ...

phpjavascriptajaxjquery

Update the objects with new values when the user makes changes in the

I am working with dynamically created input fields const [data, setData] = useState({ native: [{}], rolls: [{}] }) // initial data {navtive?.map((item, index) => { return ( <input type="text" name={item.id} ...

javascriptreactjs

Utilizing getStaticProps for Performance Optimization in Next.js

I am currently in the process of setting up a blog using Next.js and GraphCMS. I have an ArticleList component that I want to display on multiple pages, such as my homepage and under each article as a recommendation. Since the article list is sourced from ...

javascriptreactjsnext.js

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

I am facing a simple challenge at the moment. My goal is to dynamically change the background color of my rows, with the intention of incorporating this feature when expanding or contracting groups. Currently, I am attempting to utilize gridOptions.getRow ...

javascriptcssvue.jsag-grid

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

I encountered a situation like this: I need to implement a Ngb Bootstrap carousel with buttons for Previous and Next to control the slide images. Clicking on the Previous button should display the previous slide image, and clicking on the Next button shou ...

javascriptangulartypescriptcarouselng-bootstrap

Looking for a way to update a world map image by selecting multiple checkboxes to apply a flood fill color to different countries using Mogrify

Exploring different methods to achieve my goal, I am wondering if creating a web service where users can track visited countries on a world map can be done in a simpler way than using Javascript or Ajax. The idea is for users to mark the countries they hav ...

javascripthtmlajaximagecheckbox

Using the $lookup aggregation stage to $group a nested array in MongoDB

I'm working with a Product Schema that is partially built using mongoose. Here's a snippet: attributes: [ { set: { ref: 'AttributeSet', type: Schema.Types.ObjectId }, items: [ ...

javascriptnode.jsmongodbmongooseaggregation-framework

Is it possible to utilize both jQuery and AngularJS in our web application?

Is it feasible to incorporate both jQuery and AngularJS in our web application? Some sources suggest avoiding using them together due to their distinct lifecycles. We need to develop a responsive web application using ASP.NET WebApi and AngularJS. To achi ...

jqueryangularjstwitter-bootstrapasp.net-web-api

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

javascriptjquerycss

development of MapLayers with rails and javascript

As a newcomer to RoR, I am encountering an issue that seems to be eluding me. I attempted to replicate the example application found on the mapLayers GitHub repository at https://github.com/pka/map_layers/wiki. However, all I see is the JavaScript code gen ...

javascriptruby-on-railsrubygoogle-maps

What is the best method for resetting filtered data in ng-table?

Implementing the ngTable directive has brought impressive filtering capabilities to my table. The structure of my view includes: <table ng-table="tableParams" show-filter="true" class="table table-bordered table-hover table-condensed table-striped"&g ...

angularjsangularjs-directivengtable

Tips for extracting dynamically loaded content from a website using Node.js and Selenium?

I'm currently encountering some challenges when trying to scrape a website that utilizes react for certain parts of its content, and I'm unsure about the reason behind my inability to extract the data. Below is the HTML structure of the website: ...

javascriptnode.jsseleniumselenium-webdriverweb-scraping

"OBJLoader Three.js r74, bringing vibrantly colored elements to your 3

It's a straightforward process, I import my OBJ model that was exported using 3DS Max. I have the intention of coloring a specific section of the Object. During the animation loop, I implement the following: scene.traverse( function( object ) { ...

javascript3dthree.jsmesh

Using regular expressions, eliminate the element from a JSON object that contains a specified property

Imagine I have a string representing a JSON object. It could be invalid, with some params that will be replaced by another system (e.g. %param%). The task at hand is to remove all objects with a known propertyName equal to "true" using regex. { "someT ...

javascriptjsonregex

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox

How to set a default value in AngularJS ng-model using the value from another ng-model

One of the challenges I'm facing is transferring a value set by the user in an ng-model from one form field to another ng-model as the initial value within the same form. For example, I want the ng-init value of myModel.fieldB to be the val ...

javascriptangularjsangularjs-ng-modelangularjs-ng-init

Express router is unable to process POST requests, resulting in a 404 error

I am having trouble fetching POST requests to my Express router. While my many GET requests work fine, this is my first POST request and it is not functioning correctly. Here is a snippet of my frontend code: export async function postHamster(name, age) ...

javascriptexpresspostroutesfetch

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

javascripthtmlnode.jsreactjsfsevents

Tips for adding an image into a PDF document using the jsPDF library in HTML

Due to the lack of support for utf8 characters in jspdf, I'm experimenting with replacing some characters with images before exporting to pdf. To illustrate, I've created a code sample where I insert an image into an html div and then attempt to ...

javascripthtmljspdf