AngularJS中如何在循环外计算日期差并按每个Div日期控制Pay按钮显隐？

Hey there! Let's tackle this the AngularJS way—mixing jQuery DOM manipulation with Angular can lead to messy, hard-to-maintain code, especially when you've got 50+ elements to handle. Here's a clean, scalable solution that aligns with Angular's data-driven philosophy:

First, let's fix your core approach #

Your original code has a couple of key issues:

• You're targeting a single #pay ID, which won't work for 50+ buttons (IDs must be unique!)
• You're trying to manipulate DOM directly instead of letting Angular handle view updates via data bindings
• The diffdate.map(Number) line is invalid because diffdate is a single number, not an array

Step-by-Step Solution #

1. Preprocess Your Data in the Controller

First, we'll add a boolean property to each date item indicating if it's within the last 365 days. This way, we calculate the date difference once (not on every render) and let Angular handle the rest.

angular.module('myPaymentApp', [])
.controller('PaymentController', function($scope) {
  // Your raw date data
  $scope.paymentDates = { 
    date: [
      { date:"01/01/2023" },
      { date:"01/01/2022" },
      { date:"01/01/2021" },
      // Add your 50+ additional date objects here
    ] 
  };

  // Helper function to check if a date is within the last 365 days
  function isWithinLastYear(dateString) {
    // Parse MM/DD/YYYY format (note: months are 0-indexed in JS Date)
    const [month, day, year] = dateString.split('/');
    const targetDate = new Date(year, month - 1, day);
    const today = new Date();
    
    const timeDifference = Math.abs(today.getTime() - targetDate.getTime());
    const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
    
    return daysDifference <= 365;
  }

  // Add the boolean flag to each date item
  $scope.paymentDates.date.forEach(item => {
    item.showPayButton = isWithinLastYear(item.date);
  });
});

2. Build Your Template with Angular Directives

Use ng-repeat to generate your 50+ Divs, and bind each Pay button's visibility to the showPayButton property we added. No jQuery needed!

<div ng-app="myPaymentApp" ng-controller="PaymentController">
  <!-- Loop through each date to create a Div -->
  <div ng-repeat="payment in paymentDates.date track by $index">
    <p>Date: {{ payment.date }}</p>
    <!-- Show button only if the date is within the last 365 days -->
    <button ng-show="payment.showPayButton">Pay</button>
  </div>
</div>

Why This Works #

• Data-Driven Views: Angular automatically updates the button visibility based on the showPayButton flag—no manual DOM manipulation required.
• Unique Elements: ng-repeat ensures each Div and button is tied to its specific date item, avoiding ID conflicts.
• Performance: We calculate the date difference once during data initialization, not every time the view renders.
• Maintainability: If you ever need to adjust the date logic (e.g., change to 30 days), you only update the isWithinLastYear function.

Quick Fixes for Your Original Code (If You Must Keep Some Parts) #

If you really need to work with your existing loop structure, avoid jQuery and use Angular's $scope to track each item's status instead. But the above approach is far more scalable for 50+ elements.

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