I am using an HTML component within Angular. The template code looks like this:
<tr ng-repeat="item in documentList track by $index">
<td>{{item.TYPE}}</td>
<td>{{item.DATE_CREATE}}</td>
<td>
<a type="button" class="btn btn-default" ng-click="delDocument(item)">Delete</a>
</td>
</tr>
The method delDocument(item) is as follows:
$scope.delDocument = function(item){
if(confirm('Do you really want to delete the document?')) {
$.ajax('/ajax/del_document.php', {
'method': 'POST',
'data': {
'id': item.ID,
},
'success': function(){
i = 0;
while(i<$scope.documentList.length) {
if($scope.documentList[i].ID===item.ID) {
$scope.documentList.slice(i, 1);
}
i++;
}
}
});
}
}
When a user clicks the Delete button, I expected that the element would be removed from the back-end via AJAX, the documentList would change, and Angular would update the DOM. However, despite the documentList changing, the HTML page remains unchanged.
Can anyone help me diagnose what might be causing this issue? What am I missing?