I've encountered a small issue. I have checkboxes that correspond to different divs, and when checked, the name of the div is sent to the server. However, when unchecking the checkboxes in a specific order, the array doesn't update correctly.
$scope.savesGraphUserDetail = [];
$scope.addRemoveUserChart = function(checked, value) {
if (checked) {
$scope.savesGraphUserDetail.push(value);
var config = { headers: { "Content-Type": "application/x-www-form-urlencoded", "X-HTTP-Method-Override": "PUT" } };
var data = {graphsConfig: $scope.savesGraphUserDetail};
$http
.post(serviceBase + "blabla", data, config)
.success(function(data, status, headers, config) {
})
.error(function(data, status, header, config) {
});
}else {
var index = $scope.savesGraphUserDetail.indexOf(value);
$scope.savesGraphUserDetail.splice(index);
var config = { headers: { "Content-Type": "application/x-www-form-urlencoded", "X-HTTP-Method-Override": "PUT" } };
var data = {graphsConfig: $scope.savesGraphUserDetail};
$http
.post(serviceBase + "blabla", data, config)
.success(function(data, status, headers, config) {
})
.error(function(data, status, header, config) {
});
}
The problem arises when unchecking checkboxes in an inconsistent order. The array does not remove only the unchecked item as intended, resulting in unexpected behavior. How can this be fixed?