Assuming that you have gone from the XML to an Angular-managed array of JavaScript objects, you can use this to render your objects:
<tr ng-repeat="cafe in cafes">
<td>{{cafe.name}}</td>
<td>
<button class="btn" ng-click="deleteCafe($index, cafe)">Delete</button>
</td>
</tr>
and in your controller you can do this:
function ListCtrl($scope, $http, CafeService) {
CafeService.list(function (cafes) {
$scope.cafes = cafes;
});
$scope.deleteCafe = function (index, cafe) {
$http.delete(cafe.self).then(function () {
$scope.cafes.splice(index, 1);
}, function () {
// handle error here
});
}
}
Look, no client-side creation of URLs! :)
update: fixed a bug in the splice command, was splice(index, index)
, but should be splice(index, 1)
.