I'm new to Angular (and javascript), so there's probably a pretty simple reason that this isn't working. I've got a datepicker that gives me a date based on which I generate some content to display. So if the date from the datepicker changes, I need to regenerate the content. That I can do (ng-change is executing)---the problem is that I'm getting the same content, because the date isn't actually changing. I can confirm it with alerts to display the date being used on the generation of the content. The date is originally set to a default (yesterday's date) so the first time the content is generated, it works fine, but when I try to change the date with the datepicker, it doesn't change.
HTML code:
<p class="col-xs-2 col-md-2 col-md-offset-5 text-center input-group">
<span class="form-control input-sm" style="cursor:pointer" ng-click="openDatePicker($event, 'openedDaily')">
{{ds_date | date:'MM/dd/yyyy'}}
</span>
<input type="hidden" class="form-control input-sm"
ng-model="ds_date" ng-change="regenerate();"
ng-required="true"
format-day-title="MM/dd/yyyy"
datepicker-popup="MM/dd/yyyy"
show-button-bar="false"
is-open="openedDaily"
min-date="onemonthago"
max-date="yesterday"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-default" ng-click="openDatePicker($event, 'openedDaily')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Controller:
angular.module('twApp')
.controller('ReportsCtrl', function ($scope, $modal, $filter, LoginData, $timeout, $http) {
$scope.yesterday = new Date();
$scope.yesterday.setDate($scope.yesterday.getDate() - 1);
$scope.reportOutput = null;
$scope.ds_date= $scope.yesterday;
$scope.openDatePicker = function($event, name) {
$event.preventDefault();
$event.stopPropagation();
$scope[name] = true;
alert($scope.ds_date);
};
function dateString(input) {
return $filter('date')(input, 'yyyy-MM-dd');
}
$scope.goBack = function(){
$scope.reportOutput = null;
};
$scope.regenerate = function(){
$scope.generate($scope.which);
};
$scope.generate = function(id) {
var promise = requestReport(id);
if (promise !== null) {
alert('generated!! '+$scope.ds_date);
$scope.loading = true;
promise.then(
function() {
$scope.loading = false;
}, function() {
alert('There was a problem generating the report. Please try again.');
$scope.loading = false;
}
);
}
};
var requestReport = function(id) {
//do stuff
};
});
EDIT: Here is what generates the datepicker:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div role="application" ng-keydown="keydown($event)">
<daypicker tabindex="0"></daypicker>
</div>
</script>
<script id="template/datepicker/popup.html" type="text/ng-template">
<ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group">
<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<table class="datepickertable">
<thead>
<tr>
<th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
<th colspan="{{5}}" class="text-center"><strong>{{title}}</strong></th>
<th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
</tr>
<tr>
<th ng-repeat="label in labels track by $index" class="text-center"><small aria-label="{{label.full}}">{{label.abbr}}</small></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
<button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current}">{{dt.label}}</span></button>
</td>
</tr>
</tbody>
</table>
</script>
