Is it possible to nest a filter within another filter in AngularJS?

After creating a filter to convert my date to time, I decided to name it the official filter "date" of AngularJS.

project.date_created_at and project.mel have different formats, so I needed to create a custom filter for project.date_created_at.

HTML :

<span>{{ project.date_created_at | dateCustom }}</span>
<span>{{ project.mel | date:'dd/MM/yyyy' }}</span>

JS :

myApp.filter('dateCustom', function () {
    return function (input) {

        if(input != undefined) {
            var d = new Date(input);
            var time = d.getTime();
            // use official $filter('date') here ?
        }

    }
});

The desired format is:

date:'dd/MM/yyyy'

Answer №1

To include $filter as a dependency, you can follow the same process as you would for a controller, service, or directive.

myApp.filter('myFilter',[ '$filter', function ($filter) {
    return function (input) {
      /**
         Perform your operations here
      **/
      return $filter('date')(myDate, myFormat);
    }
}]);

Additionally, it is recommended to use angular.isDefined instead of != undefined.

For more information, refer to the documentation for $filter and date.

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

Encountering a "Error 404: Page Not Found" message when trying to request a json object from a node server

Working on a RESTful API, I have set it up to run on node.js using express.js, mongodb with mongoose for object modeling, and body-parser for passing HTTP data. However, whenever I start the server and try to access the specified IP address, I encounter a ...

Node-static is reporting that the localhost page cannot be located

I am currently attempting to serve static files using node-static. My plan is to eventually run this as a Windows service using nssm. I have successfully executed this process in the past, however for some reason it is not working now. Here is the code sn ...

How can the event listener be utilized with md-autocomplete?

I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

I am struggling to identify the issue with my code, especially since I'm not very familiar with jQuery. The goal is to create an HTML form for storing car data based on this template: The source code for the HTML form can be found here. Upon clickin ...

executing a hook within _app.tsx in Next.js

The issue I'm facing involves the rendering of a hook that helps determine if my components are within the screen's view to trigger animations. This hook is executed in _app.tsx, however, it doesn't run when switching to another page. Oddly ...

A guide on showcasing nested arrays data in an Angular application

info = [ { list: [ { title: 'apple'} ] }, { list: [ { title: 'banana'} ] } ] My goal here is to extract the list items. Here is how they are structured. desired r ...

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

When the value is removed, it does not revert back to the initial filtered choices

After clearing the input, I want to display all the original li's again. The issue is that even though .value = '' clears the input, the filter remains active. I could really use some help with this as it's starting to get on my nerves ...

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

"Is there a way to retrieve the props that have been passed down to a

I am looking to have custom props created in the root layer of my React app: import React from 'react' import App, { Container } from 'next/app' export default class MyApp extends App { static async getInitialProps({ Component, rout ...

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

A glitch in showcasing the hello world example in Node.js with express

I've been diving into learning node.js and I'm eager to use the express framework. However, I hit a roadblock when trying to run a simple "hello world" example from the expressjs.com website. Instead of seeing the expected output, I encountered a ...

After restarting, Nuxt 3 runtime configuration values do not get updated with environment variables

Encountered a challenge with updating variables in runtimeConfig that rely on environment variables. When the application is built with values from the .env file like: API_URL=localhost:3000 The console displays localhost:3000. However, upon stopping th ...

Design my div layout to resemble a tree shape

Take a look at this URL. I have dynamically created divs in a nested structure for a sports tournament. I need help styling the divs to match the tournament structure. This is how I want my structure to look. The code is functioning properly, it's ju ...

Clicking on a date in Vue.js Fullcalendar

My goal is to retrieve a date value from the onDateClick function of fullCalendar using vue.js and then pass this data to a prop that can be stored in my backend via Laravel. However, I am encountering various undefined errors no matter how I approach th ...

Vue.js - I am looking to create dynamic buttons that change color when clicked

I have dynamically created buttons using v-for and now I want the clicked button to change color while the others remain the same. <template> <div id="exam-screen" class="exam jumbotron"> <h1>{{ title }}</h1> <div cl ...

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

The ASP.Net web site I have deployed in IIS 7.5 includes a file named Cart.svc, which is used for accessing JavaScript from the browser. While the JavaScript functions fine without SSL, enabling SSL causes it to stop working. Interestingly, removing the / ...

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

Adding additional validations to your Marketo form is a great way to ensure the accuracy

I'm having trouble adding a new validation rule to the Marketo form since I'm not well-versed in JS and jQuery. I need this rule to display an error message if the form is submitted with any field left empty. Additionally, I want to validate the ...