如何基于AngularJS实现店铺当日营业时间的动态展示？

Hey there! Let's get that dynamic same-day business hours working smoothly. Since you already have your shop hours stored in the shop object with properties like MondayOpenTime, here's a straightforward, maintainable approach using AngularJS:

Step 1: Add Logic in Your Controller #

First, we'll grab the current day of the week, map it to your existing shop property names, and pull the corresponding hours dynamically.

angular.module('yourShopApp', [])
  .controller('ShopHoursController', function($scope) {
    // Your existing shop data (passed in from your backend)
    $scope.shop = {
      MondayOpenTime: '09:00',
      MondayCloseTime: '18:00',
      TuesdayOpenTime: '09:00',
      TuesdayCloseTime: '18:00',
      // ... rest of your days
      SundayOpenTime: '11:00',
      SundayCloseTime: '16:00'
    };

    // Map numeric day (0=Sunday, 1=Monday...) to your property prefix
    const dayMap = [
      'Sunday', 'Monday', 'Tuesday', 'Wednesday', 
      'Thursday', 'Friday', 'Saturday'
    ];

    // Get current day
    const today = new Date();
    const currentDayName = dayMap[today.getDay()];

    // Dynamically fetch today's hours
    $scope.todayHours = {
      open: $scope.shop[`${currentDayName}OpenTime`],
      close: $scope.shop[`${currentDayName}CloseTime`]
    };

    // Bonus: Add "currently open/closed" status
    const currentTime = today.getHours() * 60 + today.getMinutes();
    const openTimeMins = $scope.todayHours.open.split(':').reduce((h, m) => parseInt(h)*60 + parseInt(m), 0);
    const closeTimeMins = $scope.todayHours.close.split(':').reduce((h, m) => parseInt(h)*60 + parseInt(m), 0);
    $scope.isCurrentlyOpen = currentTime >= openTimeMins && currentTime <= closeTimeMins;
  });

Step 2: Update Your View #

Now bind the dynamic data in your template. You can use Angular's expressions directly, or ng-bind for cleaner rendering:

<div ng-controller="ShopHoursController">
  <h3>Today's Hours</h3>
  <p>
    {{ isCurrentlyOpen ? 'We\'re currently open!' : 'We\'re closed right now.' }}<br>
    Hours: {{ todayHours.open }} - {{ todayHours.close }}
  </p>
</div>

Step 3: Optional Cleanup with a Filter #

If you want to reuse this logic across your app, turn the day mapping into a filter. This keeps your controller lean:

angular.module('yourShopApp')
  .filter('todayHours', function() {
    return function(shopData) {
      const dayMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      const today = new Date();
      const currentDayName = dayMap[today.getDay()];
      
      return {
        open: shopData[`${currentDayName}OpenTime`],
        close: shopData[`${currentDayName}CloseTime`]
      };
    };
  });

Then use it in your view like this:

<div ng-controller="ShopHoursController">
  <h3>Today's Hours</h3>
  <p>Hours: {{ (shop | todayHours).open }} - {{ (shop | todayHours).close }}</p>
</div>

Key Notes #

• Make sure your backend is passing the shop object correctly to the Angular scope.
• Handle edge cases (e.g., if a day has no hours set—add a check to show "Closed" instead of empty values).
• The bonus "currently open" logic assumes your time format is HH:MM (24-hour). Adjust if you're using 12-hour time with AM/PM.

This approach is lightweight, uses AngularJS's core features, and plays nicely with your existing data structure. Let me know if you need to tweak anything for your specific setup!

内容的提问来源于stack exchange，提问作者QBALL777