2016-09-21 36 views
1

我有一個表單需要對其進行某些驗證。我有兩個下拉菜單,顯示相同的數據(在這種情況下,與到期日的促銷代碼)..基於截止日期的角度陣列刪除

所以我的第一個下拉列表是爲促銷代碼:

<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> 

所以我的第二個下拉是這其他促銷代碼:

<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> 

這裏是我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); 
}; 

在我的控制器中,我得到一個空數組或未定義的filteredPromos。所以過濾器功能不正常運行,我不知道我錯過了它。

我的問題是當用戶在第一個下拉列表中選擇一個促銷代碼時,它會根據您選擇的內容選擇一個到期代碼。因此,我想刪除附加促銷代碼中的所有代碼,即第二個下拉列表中的所有代碼。我不能使用.slice(),因爲它們不是按照時間順序排列的。我爲我的日期使用了momment.js,因此可能希望使用.isBefore()來比較日期。

所以我給你舉個例子,我選擇了第一個下拉式的promo_code「25ANC」 promo_expiration:「01/30/2017」。現在,應該從下拉菜單中刪除過去該日期的附加促銷下拉菜單中的任何內容。

我目前有$ watch功能,正在觀看ng-model的promo和addPromo。我知道我需要創建一個功能,將進入和切片不符合日期驗證的促銷代碼。但是,我應該如何創建該功能,以及應該在哪裏調用該功能呢?

如果我缺少代碼的任何部分,請讓我知道我可以提供它。

+0

我正要寫下你必須使用你的promoAction()調用去做魔術......但你有2個類似的代碼片段作爲例子。 –

回答

0

所以我想出了一個修復,比較兩個使用momentjs。我瀏覽了promos,然後返回過濾器提供的內容並將其作爲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); 
}; 
1

你一定要綁定的ng-change功能,但可能只在您的第一下拉(B/C從第一個下拉列表中選擇用於過濾的宣傳片第二個下拉觸發)。

Here is a plunker

改變ng-optionsp,而不是僅僅p.Promo_ID將全面推廣對象綁定到ng-model,這意味着我們可以用$scope.promo.Promo_EXP訪問選定宣傳片到期日期和比較等促銷日期至。

您會注意到第二個下拉列表綁定到範圍變量additionalPromos,該範圍變量在$scope.promoAction()中創建,基本上只是一組經過濾的「有效」促銷(即日期少於您在第一個下拉菜單)。

我還沒有看到你的完整實現,所以它可能不適合100%,但希望它有幫助。

+0

我已經更新了上面的代碼,爲您提供了更多關於我陷入困境的信息。我知道過濾器路線將是最好的,但由於潛在的範圍問題,仍然無法在適當的位置實施該功能。 – Jaser