Angular Array Remove Based on Expiration Date

Question

I have a form that needs to have certain validation required to it. I have two drop downs that show the same data (in this case promotional codes with expiration date)..

So my first dropdown is which is Promotional Code:

<div class="input-group col-sm-12 col-md-12 col-lg-12">
     <span style="min-width: 150px;" class="input-group-addon promo-select">Select Promo Code</span>
     <select id="offer_promo" name="offer_promo" class="form-control" ng-change="promoAction()"
                    ng-model="promo"
                    ng-options="p.Promo_ID as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in promos">
         <option value="">Please Select A Promotion</option>
     </select>
</div>

So my second dropdown is which is Additional Promotional Code:

<div data-ng-show="(offer.is_primary === 1)" class="input-group col-sm-12 col-md-12 col-lg-12">
      <span class="input-group-addon">Additional Code</span>
      <select ng-disabled="additionalCodeDisabled" id="offer_promo_add" name="offer_promo_add" class="form-control" ng-model="addPromo"
                    ng-options="p.Promo_Code as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in addPromos"></select>
</div>

Here is my filter controller which I am calling within promoAction:

$scope.promoFilter = function() {
  function promosFilteredBy(date) {
    var filteredPromos = $scope.addPromos.filter(function(addPromos) {
      console.log(filteredPromos);
      var promoDate = new Date($scope.promo_expiration);
      return promoDate < date;
    });
    return filteredPromos;
  }

  var selectedPromoDate = new Date($scope.promo_expiration);
  $scope.addPromos = promosFilteredBy(selectedPromoDate);
};

Within my controller, I am getting back a blank array or undefined for filteredPromos. So the filter function is not properly running and I am not sure where I am missing it.

My issue comes in when a user selects a promo code on the first drop down, it has a certain expiration code based on what you selected. So I would like to remove all codes in the Additional Promotion Code aka the Second Dropdown that is higher than the. I can't use .slice() because they are not in a chronological order. I am using momment.js for my dates, so potentially would like to use the .isBefore() to compare the dates.

So I'll give you an example, I select on the first dropdown promo_code "25ANC" promo_expiration: "01/30/2017". Now anything in the Additional Promo dropdown that is past that date should be removed from the dropdown.

I currently have a $watch function that is watching the ng-model for promo and addPromo. I know I need to create a function that will go in and slice the promo codes that do not meet the date validation. But how should I create that function and where should call for that function specifically?

If I am missing any section for the code, let me know I can provide it.

I was about to write that you have to use your promoAction() call to do the magic... but you have 2 similar snipsets of code as examples. — Vladimir M
– Vladimir M, Commented Sep 21, 2016 at 21:34

Nathan Beck · Accepted Answer · 2016-09-21 22:04:12Z

1

You will definitely want to bind to the ng-change function, but probably only in your first dropdown (b/c selecting from the first dropdown is the trigger for filtering the promos for the second dropdown).

Here is a plunker

Changing the ng-options to be p instead of just p.Promo_ID will bind the full promo object to ng-model, which means we can access the selected promos expiration date with $scope.promo.Promo_EXP and compare the other promo dates to that.

You'll notice the second dropdown is bound to a scope variable additionalPromos, which is created in $scope.promoAction() and is basically just an array of filtered, "valid" promos (aka ones with dates less than the one you selected in the first dropdown).

I've not seen your full implementation so it may not fit 100%, but hopefully it helps.

answered Sep 21, 2016 at 22:04

Nathan Beck

1,20115 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaser Over a year ago

I have updated my code above to provide you more insight on where I am getting stuck. I know the filter route is going to be the best, however still unable to implement the function in the proper place because of potential scoping issues.

Jaser · Accepted Answer · 2016-09-22 19:28:51Z

0

So I figured out a fix to compare the two using momentjs. I ran through the promos and then returned what is provided by the filter and placed it as the addPromos.

$scope.promoFilter = function(promo_expiration) {
      function promosFilteredBy(promo_expiration) {
        return $scope.promos.filter(function(promo) {
          return moment(promo_expiration).isBefore(promo.Expiration_Date);
        });
      }
      $scope.addPromos = promosFilteredBy(promo_expiration);
};

answered Sep 22, 2016 at 19:28

Jaser

636 bronze badges

Collectives™ on Stack Overflow

Angular Array Remove Based on Expiration Date

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related