Confused by AngularJS filter template binding syntax?

While exploring the angularJS documentation, I came across various filter templates structured like this:

{{ date_expression | date : date : format}}

I'm curious about the meaning of date : date.

To test this out, I decided to run the following code: (JS Fiddle http://jsfiddle.net/6Jt4h/2/)

Here's the HTML:

<div ng-app="testApp" ng-controller="testCon">    
    {{dt1 | date : 'MM/dd/yyyy @ h:mma'}}<br>
    {{dt1 | date : dt1 : 'MM/dd/yyyy @ h:mma'}}
</div>

And here's the Javascript:

var testApp = angular.module('testApp', []);    
testApp.controller('testCon', function($scope) {
    $scope.dt1 = new Date();
});

The output is as follows:

03/20/2014 @ 3:19PM
T3u 3PMr 20 2014 15:19:46 G3T-0500 (CentrPMl DPM2014lig3t Ti19e)

I'm puzzled by why the second line doesn't work properly, despite seeming to follow the correct syntax. Is it possible that the correct syntax should be:

{{ date_expression | date : format}}

Answer №1

It seems like you are on the right track. The documentation is misleading and the correct syntax should be {{date_expression|date:format}.

A little insight into this mistake: Angular filters work as basic functions, so it can be visualized as something similar to function date(date, format). However, when used as a filter, the first parameter is actually the value before the pipe. (in this case, data_expression)

If you want, you could suggest an improvement by submitting a pull request for the documentation. Or I will do it myself and take credit for spotting this issue :)

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

Disallow users from closing the tab or browser window

Is it feasible to create a loop on window.onbeforeunload that opens the current page repeatedly upon tab exit? Take a look at the code below - it works, but browsers may block it as a popup. window.onbeforeunload = function(e) { window.open(do ...

Is it possible to utilize the ControllerAs syntax in multiple Controllers that are associated with the same view?

QUERY: Is it possible to utilize the ControllerAs syntax in separate Controllers that are sharing the same view? For example, using (var vm = this)? PREDICAMENT I am facing a linter error in my console from EsLinter: "Designated alias 'vm' ...

The relentless Livewire Event Listener in JavaScript keeps on running without pausing

I need to create a solution where JavaScript listens for an event emitted by Livewire and performs a specific action. Currently, the JavaScript code is able to listen to the Livewire event, but it keeps executing continuously instead of just once per event ...

Accessing an object's property within a mapped array in a Next.js application is possible

Currently, I am attempting to iterate through an array of objects and extract the link property as a <li></li> element. However, I am facing an issue where nothing is being returned: import { useState, useEffect } from "react"; import ...

Executing a TypeORM query with a distinct clause that ignores case sensitivity

I am attempting to construct a TypeORM query builder that pulls data from a postgresql database to retrieve all unique names. Here is how my query currently looks: names = await this._context.manager .getRepository(Names) .createQueryBuilde ...

Best practices for effectively managing errors within JSON web tokens

I am a novice attempting to manage JWT verification. Within the function below, my goal is for the system to generate a new access token based on the refresh token if the user's access token has expired. import { asyncHandler } from "../utils/asy ...

PHP - Printing out various embedded HTML quotes

My goal is to display the following line of HTML using PHP echo "<a class='fa fa-ban fa-2x cancelClass' onClick='cancelClass('$id', '$formattedDate', '$time')'></a><p class='text-center ...

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

Troubleshooting problem with iPhone X responsiveness

Struggling with responsive issues on iPhone X. Issue is only appearing on actual device. Any tips for fixing this? I'm facing an issue where the website looks good and responsive on all devices in Chrome's responsive view. But when I access it th ...

Optimize the Loading Sequence of Javascript

I am using a WordPress site with various scripts included. In the header of my site, I have enqueued jQuery and jQuery UI as follows: wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js', nu ...

Find the object in an array with the latest date using AngularJS

I'm a beginner with AngularJS and I'm trying to retrieve the latest dated object from a list of objects. Within my list of customers, each customer has a property called CreatedOn (which is a date). What I am looking to do is select a single cu ...

PHP and AJAX: Combining Powers to Fetch Data

Greetings. I am currently in the process of creating a WordPress plugin that will manually send an email containing WooCommerce Order details to a specified supplier's email address. I am facing a challenge in understanding how to load data when a use ...

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

Dealing with Regular Expressions in Javascript and PHP Challenge

I am struggling to achieve the same outcome with my JavaScript as I do with my PHP code. The issue lies in how JavaScript omits backslashes, unlike PHP. To address this, I have included random forward and backward slashes to cater for different systems. Se ...

Updating the organization of the models directory in Loopback

I am looking to update the structure of the models folder. As per the documentation, I can make changes to the json config file which is typically set up like this: { "_meta": { "sources": [ "loopback/common/models/**/*", "loopback/serve ...

Experiencing Challenges with JavaScript Implementation Within an HTML Document

Code: <!DOCTYPE html> <head> <script type="text/javascript" src="jquery-3.3.1.js"> </script> <script type="text/javascript"> $(function() { alert("Hello World"); }); </script> <meta charset ...

JavaScript: employing a for loop as a variable declaration

Recently, I've been delving into JavaScript and exploring the functionality of the 'for' statement. However, I have a question that's been on my mind. I've managed to use the 'for' statement to produce output, like this: ...

Using PHP to calculate the total number of records within an HTML document

I am currently working on a PHP script to establish a connection with my MySQL database in order to retrieve the total number of users registered on my forum by counting the records in the table. https://i.sstatic.net/ZR0IY.png The PHP script should disp ...

How to Align Printed Output in Angular Components

I am a beginner in Angular and I am looking to display modal information. To print the data, I am using onclick=print(). The data shows up in the print preview, but it is not aligned correctly. Here is a screenshot of my page. I want to align the data prop ...

Transmitting information exclusively to a targeted individual rather than broadcasting it to the entire channel

Exploring the features of Faye.js has been my latest project. I am looking to customize the subscription process so that only the specific client receives a unique object upon joining a channel, making it irrelevant to others already present. Any suggesti ...