Aim: The task at hand is to update the data in the following format:
"open_hours": [ // (Note that open_hours is an array).
{
"weekday": "mon",
"opens_at": "09:00",
"closes_at": "22:00"
},
{
"weekday": "tue",
"opens_at": "09:00",
"closes_at": "22:00"
}
]
within this controller.js:
$scope.days = ["sun","mon","tue","wed","thu","fri","sat"];
$scope.restaurant = {};
$scope.restaurant.open_hours = [];
This information needs to be presented in the following template using the angular-bootstrap-ui timePicker directive:
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-hover table-condensed">
<tbody ng-repeat="day in days">
<tr>
<td>
<input type="hidden" ng-model="restaurant.open_hours[day].weekday" ng-value="day"/>
{{day}}
</td>
<td>
Opens at <uib-timepicker ng-model="restaurant.open_hours[day].opens_at" show-meridian="false" show-spinners="false" minute-step="15"></uib-timepicker>
</td>
<td>
Closes at <uib-timepicker ng-model="restaurant.open_hours[day].closes_at" show-meridian="false" show-spinners="false" minute-step="15"></uib-timepicker>
</td>
</tr>
</tbody>
</table>
</div>
</div>
The challenge lies in implementing this. Despite multiple tries, I have not been successful.