I am trying to enhance my user interface by adding two new select boxes (from and until) dynamically using ng-click, but I am facing challenges in binding these selects to my array in the scope.
Here is the HTML code snippet:
<div ng-repeat="time in availability.times" class="calendar--availability--time">
<select ng-model="availability.times.time.from[$index]">
<option>...</option>
</select>
<select ng-model="availability.times.time.to[$index]">
<option>...</option>
</select>
</div>
<button class="button--secondary margin__top" ng-click="addNewTime()"><span>Add another slot</span></button>
This is the JavaScript/AngularJS code snippet:
$scope.availability = {
times: [
time: {from: '09:00', to: '21:00'}
]
}
$scope.addNewTime = function() {
var newTime = {time: { from: '', until: ''}};
$scope.availability.times.push(newTime);
}