So I am using a plugin called angular-checklist-model that calls a ng-repeat that builds a list of dats based on a value supplied. Each date has a coinciding checkbox to allow the user to uncheck that value to be submitted. Problem I am having is that is the user unchecks a box, but the box and date disappear rather than just being unchecked. Not sure where I am going wrong with this. Here is my code:
controller to pull the dates (this also does a bit more like validate dates, etc..):
$scope.getRecurDates = function() {
if (!$scope.validateDates()) return;
console.log('dates are valid')
if ($scope.editMode) {
recurDateCrit.recurClaimId = $scope.recurInfo.id;
recurDateCrit.benefitId = null;
} else {
recurDateCrit.benefitId = $scope.recurInfo.benefitId;
recurDateCrit.recurClaimId = null;
}
recurDateCrit.interval = $scope.recurInfo.intervalId;
recurDateCrit.fromDate = $scope.recurInfo.fromDate;
recurDateCrit.toDate = $scope.recurInfo.toDate;
recurService.getRecurDates($scope.transId, recurDateCrit).then(function(results) {
$scope.recurringDates = results.data;
$scope.recurInfo.dates = results.data;
console.log('dates received')
}, function(response) {
console.log('error occurred retrieving dates')
$scope.errMsg = errorService.getAllErrs(response.data);
});
};
and the part in my view to create this:
<div class="form-group col-md-12 dateArea">
<p class="input-group" ng-repeat="recurDate in recurringDates">
<input type="checkbox" name="recurringdate" checklist-model="recurInfo.dates" checklist-value="recurDate">{{ recurDate.date }}
</p>
</div>
The problem is that recurringDates
and recurInfo.dates
are both pointing to the same results.data
. One should be all the options, the other should be the selected option.
Try this instead
$scope.recurringDates = results.data.slice();
$scope.recurInfo.dates = results.data.slice();
I assumed results.data
is an array and I used slice
to create a shallow clone..