How about this: "Express different times of the day using AngularJS -

Question

How about this: "Express different times of the day using AngularJS -

In attempting to develop a directive that can determine whether it is morning, afternoon, or evening using JavaScript logic, the following code would need to be implemented:

var time = 00;

/* Check if the hour is before noon */
if (time < 12) {
    document.write("Good Morning!");
} else if (time >= 12 && time <= 17) { /* Hour falls between noon and 5pm */
    document.write("Good Afternoon!");
} else if (time > 17 && time <= 24) { /* Hour is after 5pm but before midnight */
    document.write("Good Evening!");
} else { /* Hour does not fall within the range of 0-24 */
    document.write("I'm not sure what time it is!");
}

Now, the challenge lies in achieving this functionality within an Angular environment using directives.

The structure of my Angular application's DOM is as follows:

<p> 12:00:01 </p>

I want this timestamp to render as <p>afternoon </p>.

javascript angularjs

Answer 1

Answer №1

A preference for using a filter over a directive is shared, and the implementation can be quite straightforward as shown below.

Filter:

app.filter('greet', function() {
  return function(input) {
    if (input < 12) {
      return 'Good Morning';
    } else if (input >= 12 && input <= 17) {
      return 'Good Afternoon';
    } else if (input > 17 && input <= 24) {
      return 'Good Evening';
    } else {
      return "I'm not sure what time it is!";
    }
  };
});

HTML:

<span>{{value | greet}}</span>

Example Demonstration: http://plnkr.co/edit/5zs1zrxgeL7OT7ssT7Ak?p=preview

Answer 2

A preference for using a filter over a directive is shared, and the implementation can be quite straightforward as shown below.

Filter:

app.filter('greet', function() {
  return function(input) {
    if (input < 12) {
      return 'Good Morning';
    } else if (input >= 12 && input <= 17) {
      return 'Good Afternoon';
    } else if (input > 17 && input <= 24) {
      return 'Good Evening';
    } else {
      return "I'm not sure what time it is!";
    }
  };
});

HTML:

<span>{{value | greet}}</span>

Example Demonstration: http://plnkr.co/edit/5zs1zrxgeL7OT7ssT7Ak?p=preview

How about this: "Express different times of the day using AngularJS -

Answer №1

Similar questions

What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?

having difficulty sorting items by tag groups in mongodb using $and and $in operators

Setting up Karma configuration to specifically exclude nested directories

Tips for creating a secure authentication system in an AngularJS application!

Blazor compatibility issue with Bootstrap 5 carousel functionality

divide a JSON list

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Troubleshooting issue with jest expect.any() failing to work with a custom class following migration from JavaScript to TypeScript

Struggling to properly render JSON data

Having issues with array.push functionality in JavaScript

Is there a way to load an image asynchronously when the page loads and show a loading gif during the loading process?

ion-select is experiencing display issues

Executing a Javascript function post AJAX page loading

Creating a nested observable in Angular2: A step-by-step guide

the failure of the second function to execute

Why does the return value of a function in Node.js and JavaScript sometimes appear as undefined?

Looking for a way to make the spinner disappear in puppeteer while waiting?

How come my div doesn't stick together with the other div while moving?

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object