JSFiddle - React, Tailwind, and code Playground
by wittwerj
HTML
<script src="http://code.angularjs.org/1.2.11/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="orderapp">
<div ng-controller="ordercontroller" >
<div style="background-color: lightcoral" class="form-group">
<label for="expirymonth" class="col-sm-2 control-label">Expiry Date</label>
<select ng-model="expirymonth" ng-change="setcardmonth(expirymonth)" ng-options="e.month for e in cardmonth" class="ng-pristine ng-valid"></select>
<select ng-model="expiryyear" id="expyear" ng-change="setcardyear(expiryyear)" ng-options="y.year for y in cardyear" class="ng-pristine ng-valid"></select>
</div>
<div style="background-color: lightcoral" class="form-group">
<label for="expirymonth" class="col-sm-2 control-label">Expiry Date</label>
<select><option>12</option></select>
<select><option>2014</option></select>
</div>
</div>
</div>
JavaScript
var orderapp = angular.module("orderapp", []);
orderapp.controller("ordercontroller", function($scope, $http, $compile) {
$scope.cardmonth = [
{
month: '01'
}, {
month: '02'
}, {
month: '03'
}, {
month: '04'
}, {
month: '05'
}, {
month: '06'
}, {
month: '07'
}, {
month: '08'
}, {
month: '09'
}, {
month: '10'
}, {
month: '11'
}, {
month: '12'
}
];
$scope.expirymonth = '';
$scope.cardyear = [
{
year: '2014'
}, {
year: '2015'
}, {
year: '2016'
}, {
year: '2017'
}, {
year: '2018'
}, {
year: '2019'
}, {
year: '2020'
}, {
year: '2021'
}, {
year: '2022'
}, {
year: '2023'
}, {
year: '2024'
}, {
year: '2025'
}
];
});