Splitting HTML elements with AngularJS Ng-repeat separators/dividers

I am brand new to Angular and have a list item filled with some data:

<li ng-repeat="content in contents">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>

Within my controller, I am iterating through the dates and formatting them as follows:

angular.forEach($scope.contents, function(item){
                           item.Appointment = moment(item.Appointment).format('MMMM Do YYYY'); 

                       })

I am attempting to insert an HTML divider to separate the appointments by date, for example displaying "today", followed by some appointments, then "tomorrow", "next week", etc.

Is this achievable with Angular? I have been struggling with this for quite some time.

javascriptangularjs

Answer №1

If you want to customize the filters used in the code below, simply replace "today", "tomorrow", and "next week" with your own conditions.

<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>
<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>
<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>

To implement this in JavaScript:

$scope.filterFn = function()
{
    // Add custom filter logic here

    // Return filtered results
};

Answer №2

If you want to achieve this functionality, consider using the angular-timeago module. You can find more information about it by visiting this link

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

Retrieve the quantity of files in a specific directory by implementing AJAX within a chrome extension

I need assistance with obtaining the count of images in a specific directory using JS and AJAX within my chrome extension. My current code is included below, but it does not seem to be functioning as expected since the alert is not displaying. main.js .. ...

javascriptjqueryajaxgoogle-chromegoogle-chrome-extension

FullCalendar experiencing issues displaying some events when using AJAX/JSON

I've been experimenting with FullCalendar for some time now, but I'm facing a minor issue. When I load events through AJAX/JSON in the correct format, the calendar only displays the first event. Although all other events are visible in the conso ...

javascriptjsonajaxfullcalendar

Updating form state in AngularJS immediately after programmatically changing a scope variableIs this good enough?

Whenever I'm testing my app, I have a developer button on my form that saves me from entering the same data repeatedly. This special button triggers the fakeSubmit() function which automatically fills out the form for me. The fakeSubmit() function si ...

angularjsangularjs-scope

Issue with Bootstrap 4 nested tabs retaining active status

I'm having some issues with my nested tabs, both vertical and horizontal, as they are not switching the active states properly and some bugs are arising. body { min-height: 100%; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/b ...

javascriptjquerytwitter-bootstrapbootstrap-4

Add custom CSS styles to a webpage using the CSS Style element retrieved from

I am working on an HTML page that has a TextArea and label. My goal is to create CSS classes in the TextArea and apply them to the label: <textarea id="txtCSS" name="txtCSS" rows="4" cols="50"> .FC{color:gr ...

javascripthtmlcss

Tips for setting up a full-size image with nextJS and the <Image /> component

Upgrading NextJS to the latest version has resulted in some errors when using the Image component: // import Image from 'next/image' <div style={Object.assign({}, styles.slide, style)} key={key}> <Image src={src} alt="&quo ...

javascripttypescriptnext.js

"Learning to extract data from a backend API and display it in a dropdown menu using React

I'm currently exploring React and I've created a page that includes a Form component. The Form component is designed to fetch data from the backend using axios. However, I'm facing an issue where the array data is not displaying in the sele ...

javascriptreactjsaxios

AMD module cannot be required within a registerSuite function in Intern.js

I have encountered a situation where I am trying to include some code using the require function: define(function(require) { return stuff { my_func: function() { return 1; } }; }); When I attempt to require thi ...

javascriptnode.jsamdintern

How to Manage Sessions in an MVC .net App with the Power of AngularJS

I'm currently working on a project where users with accounts in the database can log into the website and perform various functions. One of these functions involves creating a blog, which is then displayed in another project application that shares th ...

angularjsasp.net-mvc

What is the role of the .connect() method in Web Audio nodes?

Following the instructions found here, which is essentially a copy and paste from this I think I've managed to grasp most of it, except for all the node.connect()'s As far as I can tell, this code sequence is necessary to supply the audio anal ...

javascripthtmlweb-audio-api

developing a dropdown menu feature

I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time. Below is the code snippet I've been working on: HTML:- <nav class="clea ...

javascriptjqueryhtmlcss

Can someone explain the process of adding a JavaScript state variable from one React component so that it can be utilized in other components?

In my Home.js component, I handle user sign up to the API and login. After receiving the token from the authorization header in the response, I save it in the state variable 'token'. This token is crucial for accessing the API in other component ...

javascriptreactjsjsonreact-nativerequest

Exploring the function of 'this' in object transmission to a modal

I am currently setting up a modal service as demonstrated in various instances such as here and here. I have come across the use of vm but do not completely grasp its purpose. At line 13, there is the initialization of var vm = this; followed by usage of ...

javascriptangularjsionic-framework

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

javascriptjquerycss

XMLHttpRequest response: the connection has been terminated

After developing a Flickr search engine, I encountered an issue where the call to the public feed or FlickrApi varies depending on the selection made in a drop-down box. The JSONP function calls provide examples of the returned data: a) jsonFlickrApi({"ph ...

javascriptajaxjsonxmlhttprequestjsonp

The function is failing to trigger when clicked within an Angular 5 app

Hey everyone, I'm facing a minor issue with my Angular 5 project. I am trying to use a common session check method from a shared TypeScript file. This method is used both when the page loads and when the logout button is clicked to redirect the user t ...

javascriptangulartypescriptangular5

Navigating websites: Clicking buttons and analyzing content

When looking to navigate a website's directory by utilizing buttons on the page or calling the associated functions directly, what language or environment is most suitable for this task? After experimenting with Python, Java, Selenium, and JavaScript, ...

javascriptjquerypythonhtmlselenium

Unable to pass the jQuery value - troubleshooting tips for Laravel

JavaScript Issue return response()->json([ 'category' => $category, 'editRoute' => $artistCategoriesEditRoute ]); AJAX Response category Object { id: 1, title: "tt", parent_id: 0, … } id ...

javascriptjqueryajaxlaravel

The DOM element fails to load when utilizing the ng-view attribute

Recently, I have started working with AngularJS for my first web application and everything is running smoothly. However, I am now looking to integrate some charts using jQuery. The issue arises when trying to load a chart upon clicking on a menu item in ...

javascriptjqueryangularjs

Unable to retrieve $_POST data using $.post requests while iterating through options with .each

Using the .each method, I constructed an options string and sent it via .post to an external script. clicked.closest("form").find("input,textarea").each(function(){ var input=$(this); if(index==1){ options = ...

javascriptphpjqueryajax.post