I am currently utilizing Angular 1.5.5
function RetrieveDashboardDataForAllEmployees()
{
var response = eRotaService.RetrieveDashboard();
response.then(function (data) {
$scope.weekDays = data.data;
console.log(data.data);
}, function () {
alert("Failed to load the dashboard.");
})
}
The .NET service provides JSON data :
{
"weekDays": [{
"name": "Monday",
"display": 0,
"employees": [{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}, {
"name": "Tuesday",
"display": 1,
"employees": [{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}]
I intend to showcase each day of the week, starting with Monday as the first day.
<div class="row" ng-repeat="week in weekDays">
@for (int i = -2; i < 22; i+=2 )
{
<div class="col-sm-1">
@string.Format("{0}:00", i + 2)
</div>
}
<hr />
<div class="col-sm-12">
<h3>{{week[$index].name}}</h3>
<hr />
<div class="row" ng-repeat="employee in week[$index].employees">
<div class="col-sm-12">
<h4>{{employee.name}}</h4>
<hr />
<div gridster>
<ul>
<li gridster-item="employee.gridSetup" ng-cloak>
<div class="panel-default" >
<div class="panel-heading">
<h5>From : {{employee.start}} to {{employee.finish}}</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>When attempting to use ng-repeat without $index, the result displayed a blank page with no errors related to Angular JS.