Is Angular capable of displaying a date within a specific timeframe using ng-show?

So I have a button that, when clicked, displays a list of data. I am adding a unique font awesome icon in there if the JSON key value exists. However, here lies the issue. The particular key happens to be a date. I need my ng-show function to check whether this date falls within 30 days from today's date. Here is an excerpt of my code for the button:

<button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-rocket fa-2x" ng-show="ppt.Dates.key == todaysDate"></i>recent events</button> 

The array object in the JSON file looks like this:

"Dates": [
{
  "key": "2/25/2016",
  "value": "The last day to add or edit your March GoNavia Commuter Benefits order."
},
{
  "key": "3/31/2016",
  "value": "The last chance to submit claims for your 2015 Health Care FSA."
},
{
  "key": "3/31/2016",
  "value": "Final deadline for submitting claims for your 2015 Day Care FSA."
}
],

I'm struggling with finding the correct solution. I've attempted using '.length <=' but haven't had any success so far.

Thank you kindly!

Answer №1

An effective way to handle this situation is by utilizing a function within your controller (assuming the controller is referred to as ppt):

this.dateChecker = function (dateString) {
    var daysAgo = new Date();
    daysAgo.setDate(daysAgo.getDate() - 30);
    return (new Date(dateString) > daysAgo);
}

After implementing the function, you should proceed with the following step:

<button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-exclamation-circle fa-2x" ng-show="ppt.dateChecker(ppt.Dates[index].key)"></i>recent denials</button> 

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

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

An error occurred while trying to access the stored data at https://localhost:5000. The SSL protocol encountered

I am attempting to utilize an API to retrieve data and transfer it to MongoDB from my React application to the Node.js server, but I keep encountering an error message along with another issue in the console. https://i.stack.imgur.com/Bj4M6.png Despite e ...

Tips for integrating Chart.js into my AngularJS application?

I am a beginner with AngularJS and I'm currently developing an application on Ubuntu. While trying to add Chart.js using npm install chart.js, an error is being displayed as follows. npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

Troubleshooting the non-functional asynchronous function

After starting to use redis with node (specifically the node_redis module), I decided to wrap my retrieval code for debugging and DRY principles. However, I encountered an issue where my new function wasn't working as expected. As someone who is stil ...

After I refresh the state in my React form, the data within my child components starts exhibiting odd behavior

My weather app in React seems to be facing a strange issue. When I select a new city and reload the data, my child components display a mix of old and new data multiple times before finally showing the correct information. What could be causing this proble ...

A guide on fetching the selected date from a datepicker in framework7 with the help of vuejs

Here is a snippet of the code for a component I am working on: <f7-list-input label=“Fecha de nacimiento” type=“datepicker” placeholder=“Selecciona una fecha” :value=“perfil.fecha_nacimiento” @input=“perfil.fecha_nacimiento = $event.t ...

Submitting a nested JSON object in an AJAX request

When it comes to passing nested JSON through AJAX, the format of the sample request should be like this: { 'user': { 'email': email, 'password': password } } login(){ var email=document.getElementById(& ...

Resetting the quiz by utilizing the reset button

Hello everyone, I'm new to this platform called Stack Overflow. I need some help with my quiz reset button. It doesn't seem to be working as intended. According to my code, when the reset button is clicked at the end of the quiz, it should bring ...

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

When utilizing Vue JS, each key value of one computed property can trigger another computed property to run

I have a computed property: getRelatedItem () { return this.allItems.find((item) => { return item.id === this.currentSelectedItemId }) }, Here is an example of the output: relatedItem:Object -KQ1hiTWoqAU77hiKcBZ:true -KQ1tTqLrtUvGnBTsL-M:tr ...

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

Struggle encountered while incorporating PayPal into my project

Recently, I encountered an issue while trying to integrate the PayPal-node-SDK into my project for a Pay with PayPal option. The error message I received was: XMLHttpRequest cannot load https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&a ...

Incorporate another parameter into the current JSON data

I am currently facing the following scenario: Several servlets are setting the HttpServletResponse content-type to application/json. This is how I am outputting my JSON: out.write(new Gson().toJson(myObject)); where myObject is an object that structur ...

Can you guide me in utilizing this API endpoint efficiently to enable search functionality using React Query?

const { isLoading, isError, data, error, refetch } = useQuery( "college", async () => { const { result } = await axios( "http://colleges.hipolabs.com/search?name=middle" ); console.log(&quo ...

Do I need to use the "--save" flag in npm to add dependencies to the "package.json" file?

Do I really need to use the "--save" flag in order to add an installed dependency to the "package.json" file? I conducted a test without the "save" flag and found that the package was still added to the "dependencies" section. It seems like it is the defa ...

Discontinuing the mobx autorun feature upon componentWillUnmount

In my componentDidMount, I have the following autorun function: componentDidMount() { this.autoUpdate = autorun(() => { this.setState({ rows: generateRows(this.props.data) }) }) } Unfortunate ...

The issue at hand is that the headers cannot be redefined once they have already been sent

Hello, I have tried numerous solutions but have not been able to resolve the "Can't set headers after they are sent" error in the following simple code. I have spent several days working on this and would greatly appreciate any input you may have. ap ...

React component state change in reverse

As I work on a simple login form component, I encountered an issue where clicking on the form should make it disappear and only display my JSON data. However, due to my limited experience with React state management, I seem to be achieving the opposite eff ...

Unable to retrieve the value stored in the global variable

I recently updated my code to use global variables for two select elements in order to simplify things. Previously, I had separate variables for values and innerHTML which felt redundant. Now, with global variables like user and group initialized at docum ...