Search code examples
javascriptangularjscheckboxangularjs-ng-repeatchecklist-model

Angular checklist model uncheck removes date too


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>

Solution

  • 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..