Im developing a AngularJS site, and using the angular-daterangepicker to handle dates.
angular-daterangepicker
On my page, datepicker is working fine & it initializes with a start date of today, and enddate in 5 days from today (and it does this when the page loads).
I'm then iterating thru from startdate to enddate, adding each date into an associative array & then trying to use that array for a table with ng-repeat, so that each date is a new row - but my problem is that no dates are being displayed in the table, and in debugging i can see that the associate array is being created with all the dates.
Ideally, this is how my table will look if it displays the dates (and the dates are correctly formatted) - but i just can't get the table to display any dates.
*Additional Question - as im using ng-repeat to display the dates in the table, all the 'Select' boxes under 'Shift 1' end up bound to the same object - how can i stop this? As when the user has selected everything (i.e: shift 1, shift 2, sleep over) all this data will be submitted to the database.
Here's my HTML:
<div data-ng-controller="admRosController" data-ng-init="listStaff()">
<div class="page-wrapper">
<div class="banner notdark-translucent-bg" style="background-image:url('images/banner/admin.jpeg'); background-position: 50% 50%;">
<div class="breadcrumb-container">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li>
<li class="breadcrumb-item active">Staff Roster</li>
</ol>
</div>
</div>
</div>
<section class="main-container">
<div class="container">
<div class="row">
<div class="main col-lg-8">
<h1 class="page-title">Staff Roster</h1>
<div class="separator-2"></div>
</div>
</div>
<div class="row">
<div class="main col-12">
<form data-ng-submit="createRoster()" name="rosterForm" method="POST">
<div class="form-row">
<div class="form-group col-md-4">
<label for="daterange1" class="control-label">Select Roster Dates:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-calendar-check-o"></i></div>
</div>
<input date-range-picker type="text" class="form-control form-control-sm date-picker" id="daterange1" name="daterange1" data-ng-model="rosData.date" options="{locale: {format: 'MMMM D, YYYY'}}">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" data-ng-model="roster">
<thead class="thead-dark">
<tr>
<th class="text-center">Date</th>
<th class="text-center">Shift 1</th>
<th class="text-center">Shift 2</th>
<th class="text-center">Sleep Over</th>
</tr>
</thead>
<tbody>
<tr class="text-center" data-ng-repeat="x in rosCal">
<td>{{rosCal[x].date}}</td>
<td><select class="form-control form-control-sm" data-ng-model="rosData.monshift1" data-ng-options="x.id as x.name for x in obj"></select></td>
<td><select class="form-control form-control-sm" data-ng-model="rosData.monshift2" data-ng-options="x.id as x.name for x in obj"></select></td>
<td><select class="form-control form-control-sm" data-ng-model="rosData.monsleep" data-ng-options="x.id as x.name for x in obj"></select></td>
</tr>
</tbody>
</table>
</div>
<div class="form-group has-feedback">
<label for="message">Roster Notes</label>
<textarea class="form-control" rows="3" id="notes" name="notes" data-ng-model="rosData.notes" placeholder=""></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
</div>
<p><strong>Shift 1</strong> 8:30am - 4:30pm (8 hrs)<br>
<strong>Shift 2</strong> 9:00am - 3:00pm (6 hrs)</p>
<br>
<button type="submit" class="btn btn-primary">Save Roster</button>
<button type="reset" value="Reset" class="btn btn-secondary">Clear</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
And here is my Angular Controller:
var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'daterangepicker'])
app.controller ("admRosController", function ($scope, $http, $location) {
$scope.rosCal = [];
$scope.rosData = {};
$scope.rosData.date = {
startDate: moment(),
endDate: moment().add(5, "days")
};
$scope.listStaff = function() {
$http.get('php/rosstaff.php')
.then(
function (response) {
$scope.obj = response.data;
},
function (response) {
// error handling routine
}
);
var i = 0;
for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
{
$scope.rosCal.push({date: thisdate});
alert($scope.rosCal[i].date);
i++;
}
};
$scope.createRoster = function() {
//var i = 0;
//for (thisdate = $scope.rosData.date.startDate; thisdate < $scope.rosData.date.endDate; thisdate = moment().add(i, "days"))
//{
//$scope.rosCal.push({date: thisdate});
//alert($scope.rosCal[i].date);
//i++;
//}
};
});
