AngularJS前端HTML中带条件的ng-repeat及阶梯价格匹配方案求助

I've got you covered! Here's a clean implementation that meets your requirements: using ng-repeat with conditional logic that stops checking further items once a match is found, tied to your count variable that increments through your specified values.

Step 1: Controller Setup #

First, define your data and logic in the AngularJS controller. We'll track the current count, cycle through your price_qty array, and use a flag to stop processing once a match is found.

angular.module('TierPriceApp', [])
.controller('TierPriceController', function($scope) {
  // Your tier price data
  $scope.tier_price = [
    {price: "29.0000", price_qty: 1},
    {price: "28.5000", price_qty: 2},
    {price: "28.0000", price_qty: 4},
    {price: "27.1500", price_qty: 6}
  ];
  
  // Defined quantity steps
  $scope.price_qty = [1, 2, 4, 6];
  
  // Initialize count and tracking index
  $scope.count = 1;
  $scope.currentStepIndex = 0;
  $scope.isMatchFound = false; // Flag to stop checking after first match

  // Function to increment count to next step
  $scope.nextCount = function() {
    if ($scope.currentStepIndex < $scope.price_qty.length - 1) {
      $scope.currentStepIndex++;
      $scope.count = $scope.price_qty[$scope.currentStepIndex];
    }
    // Reset match flag when count changes
    $scope.isMatchFound = false;
  };

  // Check if current tier matches count, set flag if true
  $scope.checkTierMatch = function(tier) {
    if (!$scope.isMatchFound && tier.price_qty === $scope.count) {
      $scope.isMatchFound = true;
      return true;
    }
    return false;
  };
});

Step 2: HTML Implementation #

Now, use ng-repeat in your HTML with conditional blocks. We'll show the matching tier prominently and skip displaying non-matching tiers once a match is found.

<div ng-app="TierPriceApp" ng-controller="TierPriceController">
  <!-- Button to increment count through steps -->
  <button ng-click="nextCount()" ng-disabled="currentStepIndex === price_qty.length - 1">
    Next Quantity Step
  </button>
  
  <!-- Display current count -->
  <p>Current Quantity: <strong>{{count}}</strong></p>
  
  <!-- ng-repeat with conditional logic -->
  <div ng-repeat="tier in tier_price" class="tier-item">
    <!-- Show matched tier -->
    <div ng-if="checkTierMatch(tier)" class="matched-tier">
      ✅ <strong>Applicable Price:</strong> Buy {{tier.price_qty}}+ items for ${{tier.price}} each
    </div>
    
    <!-- Show non-matched tiers ONLY if no match has been found yet -->
    <div ng-if="!isMatchFound" class="non-matched-tier">
      ❌ <em>Not active yet:</em> {{tier.price_qty}} items would cost ${{tier.price}} each
    </div>
  </div>
</div>

How It Works #

• Count Increment: The nextCount() function moves through your price_qty array, updating count and resetting the isMatchFound flag each time.
• Conditional Matching: The checkTierMatch() function checks if the current tier's price_qty matches count. Once a match is found, it sets isMatchFound to true, so subsequent tiers won't show the non-matched message.
• Stop on First Match: Once isMatchFound is true, all remaining items in the ng-repeat will skip the non-matched block, effectively stopping further checks.

Optional Styling (For Better UX) #

Add some basic CSS to make the tiers stand out:

.tier-item {
  margin: 8px 0;
  padding: 8px;
  border-radius: 4px;
}
.matched-tier {
  background-color: #e8f5e9;
  border: 1px solid #c8e6c9;
}
.non-matched-tier {
  background-color: #fff3e0;
  border: 1px solid #ffe0b2;
}
button {
  padding: 8px 16px;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

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