I am facing an issue in deleting the correct row from an array using Angular.js. Below is the code snippet that I am working with:
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table>
... (Code continues)
</table>
</td>
... (More code here)
</tr>
</tbody>
</table>
</td>
</tr>
The current output of the above table is displayed in the image below:
https://i.stack.imgur.com/xxlue.png
In this table, when I click on the middle row's - button, it should delete only that specific row. However, the deletion process is incorrect as shown in the screenshot below:
https://i.stack.imgur.com/qIxX4.png
Even though I deleted the second row from the first screenshot, the subcategory part of the third row was mistakenly removed. This issue arises in my controller-side code as well:
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data, function(obj) {
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
});
},function errorCallback(response) {
})
}
$scope.addNewRow = function(answers,hasDelete) {
answers.push({
category: null,
subcategory: null,
comment: null,
hasDelete: hasDelete ? hasDelete : false
});
};
$scope.removeRow = function(answers, $index){
answers.splice($index, 1);
//answers.splice(answers.length-1,1);
};
All the data is dynamically bound, and I need to ensure that the correct row is deleted.