Question

我是AngularJS的初学者。我用JAVA开发了一个服务，我用它来消费它来删除一个Contact对象。

在AngularJS中，我在我的主页上有这个代码：

<!--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>

在我的控制器中，我有这段代码：

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);
    };
}
);

当我单击删除按钮时，对象将在数据库中删除，但我的<table>不会刷新。当我调试代码$scope.allContacts.splice(index, 1);工作正常。但桌子没有刷新

Answer 1

我认为问题在于您指定ng-controller="HomeController"两次这一事实。您可以在按钮上删除它

Answer 2

这可能会帮助我在这里添加演示代码。请看看它

＆＃13;

var app = angular.module('myApp', []);

app.controller('HomeController', function($scope) {
  var Contacts = [{
    "lastName": "ABC1",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "abcXyz@gmail.com",
  }, {
    "lastName": "ABC2",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "abcXyz@gmail.com",
  }, {
    "lastName": "ABC3",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "abcXyz@gmail.com",
  }, {
    "lastName": "ABC4",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "abcXyz@gmail.com",
  }, {
    "lastName": "ABC5",
    "firstName": "XYZ",
    "phone_1": "123456",
    "phone_2": "789456",
    "email": "abcXyz@gmail.com",
  }];
  $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);


  };
});

＆＃13;

<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>

＆＃13;

删除AngularJS中的对象后刷新JSON

2 个答案: