As a newcomer to AngularJS, I have created a Service using Java and integrated it into Angular to handle the deletion of Contact objects.
On my homepage in AngularJS, this is the code I have:
<!--RESULTS-->
<form>
<table class="table table-striped" ng-controller="HomeController">
<tr>
<th></th>
<th>Last Name</th>
<th>First Name</th>
<th>Phone Number</th>
<th>Email </th>
<th></th>
</tr>
<tr ng-repeat="contact in allContacts | filter:search | orderBy:'lastName'">
<td align="center"><img src="{{contact.picture}}" height="40" width="40"/></td>
<td class="td_data">{{contact.lastName}}</td>
<td class="td_data">{{contact.firstName}}</td>
<td class="td_data">{{contact.phone_1+" "+contact.phone_2}}</td>
<td class="td_data">{{contact.email}}</td>
<td class="td_data"><button type="button" class="btn btn-danger" ng-controller="HomeController" ng-click="deleteContact(contact)"><i class="glyphicon glyphicon-trash"></i></button></td>
</tr>
</table>
The controller code looks like this:
var module = angular.module('home.controllers', [])
.run(function($rootScope) {
$rootScope.is_hide_add_message = true;
$rootScope.alert_message = "";
})
module.controller('HomeController', function ($scope, $rootScope, $state, Contacts, $timeout) {
var allContacts = {};
/** DELETE A CONTACTS*/
$scope.deleteContact = function(contact){
/** GET INDEX OF OBJECT TO DELETE */
var index = $scope.allContacts.indexOf(contact);
/** DELETE THE OBJECT SELECTED */
Contacts.deleteContact(contact.id);
/** DELETE THE OBJECT FROM THE JSON */
$scope.allContacts.splice(index, 1);
$rootScope.alert_message = "The contact has been successfully deleted.";
/**DISPLAY THE MESSAGE*/
$rootScope.is_hide_add_message = false;
$timeout(function() {
$rootScope.is_hide_add_message = true;
}, 3000);
};
}
);
After clicking on the delete button, the object is removed from the database but the <table> is not updated. The line
$scope.allContacts.splice(index, 1);