Refresh a JSON after deleting an object in AngularJS

Question

I am a beginner in AngularJS. I developped a Service with JAVA and I Consume it in angular to delete a Contact object.

In AngularJS I have this code on my home page :

<!--RESULTS-->
<form>
<table class="table table-striped" ng-controller="HomeController">
  <tr>
    <th></th>
    <th>Nom</th>
    <th>Prénom</th>
    <th>Téléphone</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>

In my controller I have this code :

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 = "Le contact a été supprimé avec succès.";

        /**DISPLAY THE MESSAGE*/
        $rootScope.is_hide_add_message = false;
        $timeout(function() {
            $rootScope.is_hide_add_message = true;
        }, 3000);
    };
}
);

when I click on the delete button the object is deleted in the database but my <table> is not refreshed. When I debug the code $scope.allContacts.splice(index, 1); is working fine. but the table is not refreshed

I add $scope.apply() after $timeout(function() ...}, 3000); but is not working — devlopp
– devlopp, Commented Feb 10, 2016 at 14:37

dendimiiii · Accepted Answer · 2016-02-10 14:37:22Z

5

I think the problem lays with the fact you specify ng-controller="HomeController" twice. You can delete it on the button

answered Feb 10, 2016 at 14:37

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

paul trone Over a year ago

put together this example, works without the second ng-controller declaration, not with it: plnkr.co/edit/z7dLP5bjpKONTQFLgN1j?p=preview

devlopp Over a year ago

you're right :) Thanks, I removed the ng-controller="HomeController" in the button and it's working.

Pratik Bhajankar · Accepted Answer · 2016-02-10 14:51:39Z

May be this will help i have added demo code here. please have a look on it

var app = angular.module('myApp', []);

app.controller('HomeController', function($scope) {
  var Contacts = [{
    "lastName": "ABC1",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "[email protected]",
  }, {
    "lastName": "ABC2",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "[email protected]",
  }, {
    "lastName": "ABC3",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "[email protected]",
  }, {
    "lastName": "ABC4",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "[email protected]",
  }, {
    "lastName": "ABC5",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "[email protected]",
  }];
  $scope.allContacts = Contacts;
  /** DELETE A CONTACTS*/
  $scope.deleteContact = function(contact) {
    /** GET INDEX OF OBJECT TO DELETE */
    var index = $scope.allContacts.indexOf(contact);


    /** DELETE THE OBJECT FROM THE JSON */
    $scope.allContacts.splice(index, 1);


  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp">
  <table class="table table-striped" ng-controller="HomeController">
    <tr>

      <th>Nom</th>
      <th>Prénom</th>
      <th>Téléphone</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
    {{allContacts}}
    <tr ng-repeat="contact in allContacts | filter:search | orderBy:'lastName'">
      <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-click="deleteContact(contact)">delete<i class="glyphicon glyphicon-trash"></i>
        </button>
      </td>
    </tr>
  </table>

Collectives™ on Stack Overflow

Refresh a JSON after deleting an object in AngularJS

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related