Exploring the process of traversing a function for each ng-repeat element

Hey everyone, I'm currently facing an issue where I need to pass each date through a function in order to get the desired result. Let's take a closer look at the code snippet:

 <md-list>
        <md-divider ></md-divider>
        <md-subheader class="md-no-sticky">Replies</md-subheader>
        <md-list-item class="md-2-line" ng-repeat="reps in replies">
            {{reps.replyCreatorDate}}
            <ng-md-icon icon="phone" style="fill: white" size="20"></ng-md-icon>
            <img ng-src="{{reps.replyCreatorAvatar}}" class="md-avatar" alt="Something Went Wrong"/>

            <div class="md-list-item-text">
                <h3> {{reps.replyCreatorUsername}} </h3>
                <p> {{reps.replyCreatorValue}} </p>
            </div>
            <md-button class="md-secondary md-icon-button" aria-label="call">
                <ng-md-icon icon="phone" style="fill: white" size="20"></ng-md-icon>
            </md-button>
        </md-list-item>
    </md-list>

As you can see, reps.replyCreatorDate returns a date number like '1460924923708' which is not user-friendly. To display it as '2 hours ago' or '1 day ago', I have a predefined service that can handle this conversion for me with the following line of code:

timeService.getTimeF(new Date(parseInt($scope.replyCreatorDate)))

The challenge I'm facing now is figuring out how to pass each $scope.replyCreatorDate through this function so that it renders correctly. Any assistance would be greatly appreciated!

javascriptangularjsangularjs-ng-repeat

Answer №1

If you're looking to enhance your code, consider implementing a custom filter as shown below:

app.filter("formatTime", function(){
   return function(input){
      // Add your time formatting logic here
      return formattedOutput; 
   }
});

<md-list-item class="md-2-line" ng-repeat="response in replies">
            {{reps.replyCreatorDate | formatTime}}

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

Issue with Datepicker in Angular Bootstrap: format identifier not being utilized

Check out this Plunk for reference. This is how my controller is set up: app.controller("myController", [ "$scope", function($scope){ $scope.DateFormat = "DD/MM/YYYY"; $scope.From = '15/01/2015'; // DD/MM/YYYY ...

javascripthtmlcssangularjstwitter-bootstrap

Jasmine tests for AngularJS directive failed to invoke the link function

I can't figure out why the link function of my directive isn't being called in a Jasmine test. I've created a simple example to illustrate. Here is the code for my directive (TestDirective.js): 'use strict'; angular.module(&ap ...

javascriptangularjsangularjs-directivejasminekarma-jasmine

Is there a way to dynamically alter the content depending on the index of the current slide using swiper.js?

Hi, I am new to utilizing the Swiper framework and so far, it has been one of the best sliders I have ever experienced. Currently, I am trying to establish a connection between 2 div tags - one tag holds the content of each slide while the other tag contro ...

javascripthtmlcss

Retrieve the Vue object nested within another object and log it in the console

I have a variable called 'file' in my Vue application. When I use console.log to inspect its contents, it displays as shown in the image below: console.log(file); However, when I attempt to view the contents of 'exif' by using consol ...

javascriptvue.js

Ways to successfully pass multiple parameters in Nuxt

Within Nuxt.js, when working with the code in pages/posts/_id.vue, it looks like this: <template> ...

javascriptvue.jsnuxt.js

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

javascripthtmlcsstwitter-bootstrap-3

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

javascripthtmlcssleaflet

Error encountered while trying to render a Threejs FBX Object - undefined 404 (Resource not found)

I am facing an issue while loading a set of .fbx objects using FBXLoader on a WebXR App. window.fbxLoader.load("/assets/modelate_FBX/Vaza%208067134/Vaza 8067134.fbx", function( object ) { const flower = this.scene.children.find(c => c.name ...

javascriptthree.jsaugmented-realitywebxr

PHP code to display "ed elements that do not adjust height"

A php script is being utilized to scan a directory and populate a gallery with all the images. Within the <div id="content"> tag, the function <?php create_gallery("path"); ?> loads all the images. The issue arises when the height of the <d ...

javascriptphphtmlcss

The reason why the script and div tags are so common in HTML is because they serve different purposes. However, it's

Hey there, friend! I've searched on baidu.com, cnds, and stack overflow, but couldn't find an answer. I have two questions: "why can script and div tags be used so much in HTML?" and "why is there only one html and body tag in HTML?" For example: ...

javascript

Changing the link color within a repeater in ASP .NET when it is clicked

The given code snippet is being executed on an iPhone 4, causing some CSS elements like Hover to not function as expected. <asp:Repeater ID="rpt" runat="server"> <HeaderTemplate> <div class="table withshadow"> </Header ...

javascriptjqueryiphoneasp.netrepeater

Duplicate request submissions in ExtJs causing inefficiency

Trying to resolve an issue with my ExtJs table that handles remote filtering, sorting, and paging of data on the server. The problem arises when a default request is being sent alongside every other request: localhost/request?page=1&start=0&limit= ...

javascriptjqueryextjsextjs4request

Ionic: How come my image is not loading with HTTP.GET?

I have been attempting to populate a gallery in my Ionic application by fetching images from a JSON file, but I am encountering issues. While following a guide on creating a grid-like image gallery using the Ionic framework (https://blog.nraboy.com/2015/03 ...

javascripthtmlangularjshttpionic-framework

Trouble with CSS transitions not functioning while altering React state

Each time a user clicks on an accordion, the content should smoothly show or hide with a transition effect. However, the transition only seems to work when opening a closed accordion, not when closing an already open one! To get a clearer idea of this iss ...

javascriptcssreactjsnext.jssass

Leverage Reveal.js within Next.js by installing it as an npm package

I am currently working on a project that requires integrating Reveal.js with Next.js. However, I am having trouble displaying the slides properly. Every time I try to display them, nothing shows up. Even after attempting to display some slides, I still en ...

javascriptreactjsnpmnext.jsreveal.js

Remove the underline from links in gatsbyjs

When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...

javascriptreactjsgatsby

Steps for inserting an item into a div container

I've been attempting to create a website that randomly selects elements from input fields. Since I don't have a set number of inputs, I wanted to include a button that could generate inputs automatically. However, I am encountering an issue where ...

javascripthtml

Guide on configuring Angular validation to trigger on blur events and form submission

Validation in Angular is currently set to update on model change, but this method can be unfriendly for user interface as it displays errors upon keyup. An optimal solution would involve displaying error messages on blur and also on form submission. After ...

javascriptangularjsformsvalidation

Position items within the dynamically generated div without appending them

Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite ...

javascripthtmlcss

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

javascripthtmlangulardevextremedevextreme-angular