<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<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 as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in promos">
<option value="">Please Select A Promotion</option>
</select>
</div>
<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 Additional Code</span>
<select id="offer_promo" name="offer_promo" class="form-control"
ng-model="additionalPromo"
ng-options="p as p.Promo_Code + ' ( ' + p.Promo_Description + ' )' for p in additionalPromos">
<option value="">Please Select A Promotion</option>
</select>
</div>
<br>
Selected Promo EXP Date: {{ promo.Promo_EXP }}
</body>
</html>
angular.module("myApp", ["ui.bootstrap"])
.controller("AppCtrl", function($scope) {
$scope.promos = [{
"Promo_ID": 1,
"Promo_Code": "FooBar24",
"Promo_Description": "50% Off!",
"Promo_EXP": "01/20/2018"
}, {
"Promo_ID": 2,
"Promo_Code": "Another",
"Promo_Description": "50% Off!",
"Promo_EXP": "01/20/2019"
}, {
"Promo_ID": 3,
"Promo_Code": "One More",
"Promo_Description": "50% Off!",
"Promo_EXP": "01/20/2020"
}];
$scope.promoAction = function() {
function promosFilteredBy(date) {
var filteredPromos = $scope.promos.filter(function(promo) {
var promoDate = new Date(promo.Promo_EXP);
return promoDate < date;
});
return filteredPromos;
}
var selectedPromoDate = new Date($scope.promo.Promo_EXP);
$scope.additionalPromos = promosFilteredBy(selectedPromoDate);
}
})
/* Styles go here */