I'm currently working on incorporating different dates using a datepicker in my application. I have implemented a checkbox, and if the user checks that checkbox, then the dates are added. However, it appears that track by index is not functioning correctly.
Here's the code snippet:
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label> <br>
<div ng-repeat="selecting in selects track by $index" >
<div class="datePicker">
<button
bs-datepicker
class="btn btn-info" id="comm_cal_bttn"
name="date"
data-animation="am-flip-x"
data-autoclose="true"
ng-blur="getMinTime(index);"
ng-model="selects[index].commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<p ng-show="selects[index].commDate">
{{selects[index].commDate}} <span class="text-muted"> {{selects[index].commDate}}</span> {{combinedTime.format('h:mm A')}}
</p>
</div>
<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd">
<label for="dateCheck">Add Additional</label>
</form>
In the code above, when selecting a date, a function getMinTime(index) is called but the index is displaying as undefined in my controller.
My controller:
$scope.selects = [{commDate : null}];
$scope.getMinTime = function(index){
// here index is showing undefined
}
I need to perform some operations based on the index value. For instance, if I added 4 dates, what should I do next? Any suggestions?