删除成员时AngularJS不刷新表

Question

我遇到了一个问题，我可以成功地从数据库中获取成员，并将它们显示在视图上。 如果我删除一个成员，该成员确实会从数据库中删除，但是该表不会不断刷新。 （必须从浏览器刷新才能看到变化）。

当我按下删除按钮时，我试图通过$http.get 获得成员，但仍然如此。

AngularJS 代码：

    app.controller('deleteMemberCtrl', ['$scope', '$http', function($scope, $http)  
    {   
        $scope.deleteMemberBtn = function(member) {
            console.log("reached");//getting data input by user
            var deleteMember = confirm('Are you sure you want to delete this member?');


if(deleteMember){
            $http.post('model/deleteMember.php', member).success(function(data) {
                console.log(data);
                if (data) {//row inserted
                  console.log("Member succesfully deleted");
                } else {
                  $scope.deleteMessage = "Record not deleted";
                }
            });
            $http.get('model/getMember.php').success(function(data){
            $scope.members = data;
            console.log("memberCtrlTrue");
            });
        }
    };
}]);

HTML 代码

<div id="container">
    <h1> Admin Section </h1>
    <br>
    <!-- Display / Hide members -->
    <button class="btn btn-primary" id="btnAdmin" ng-click="showMembers = !showMembers">
        <span ng-show="showMembers"> Hide Members </span>
        <span ng-hide="showMembers">Display Members</span>
    </button>
    <br>
    <br>
    <table class="table table-bordered" id="customForms" ng-show="showMembers" ng-controller="getMemberCtrl">
        <thead>
            <tr>
                <th> ID </th>
                <th>Name</th>
                <th>Surname</th>
                <th>Date Of Affiliation</th>
                <th>Status</th>
                <th>Email</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="member in members">
                <td>{{member.memberID}}</td>
                <td>{{member.name}}</td>
                <td>{{member.surname}}</td>
                <td>{{member.dateOfAffiliation}}</td>
                <td>{{member.status}}</td>
                <td>{{member.email}}</td>
                <td>{{member.summary}}</td>
                <td>
                    <div ng-controller="deleteMemberCtrl">
                        <button class="btn btn-primary" ng-click="deleteMemberBtn(member)"> DELETE </button>
                </td>
                </div>
                <td>
                    <div ng-controller="updateMemberCtrl">
                        <button class="btn btn-primary" ng-click="updateMember(member)"> UPDATE </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <!-- Add Member Form -->
    <button class="btn btn-primary" id="btnAdmin" ng-click="showForm = !showForm">
        <span ng-show="showForm">Hide Member form</span>
        <span ng-hide="showForm">Add a Member</span>
    </button>
    <br><br>
    <form class="form-group" id="customForms" ng-show="showForm" ng-controller="addMemberCtrl">
        <label> Name </label>
        <input id="customFormsInput" class="form-control" ng-model="member.name" type="text" placeholder="Name goes here" required/><br>
        <label> Surname </label>
        <input id="customFormsInput" class="form-control" ng-model="member.surname" type="text" placeholder="Surname goes here" required/<br>
        <label> Date of Affiliation </label>
        <input id="customFormsInput" class="form-control" ng-model="member.dateOfAffiliation" type="date" required/>
        <br>
        <label> Status </label>
        <br>
        <select ng-model="member.status">
            <option disabled="disabled">Choose member status</option>
            <option value="active">Active</option>
            <option value="non-active">Non-Active</option>
        </select>
        <br><br>
        <label> Email </label>
        <input id="customFormsInput" class="form-control" ng-model="member.email" type="email" required/>
        <br>
        <label> Summary </label>
        <br>
        <textarea ng-model="member.summary" rows="2" cols="100" type="text" placeholder="Insert text here" required>
            <!-- User text -->
        </textarea>
        <br><br><br><br>
        <button class="btn btn-primary" type="submit" ng-click="submitMember(member)"> Submit </button>
        <br><br><br>
        <p> {{addMemberMsg}} </p>
    </form>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}
Thanks again for your help!

Answer 1

目前您正在调用delete 服务调用，然后调用获取getMember 获取调用。在delete 成功之后，这不能保证您的getMember。

为了解决这个问题，你应该在删除ajax成功后调用model/getMember.php。

控制器

app.controller('deleteMemberCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.deleteMemberBtn = function(member) {
    console.log("reached"); //getting data input by user
    var deleteMember = confirm('Are you sure you want to delete this member?');
    if (deleteMember) {
      $http.post('model/deleteMember.php', member).success(function(data) {
        console.log(data);
        //will get latest data from DB, where deleted records wouldn't be there
        $scope.getMemeber();
        if (data) { //row inserted
          console.log("Member succesfully deleted");
        } else {
          $scope.deleteMessage = "Record not deleted";
        }
      });

    }
  };

  //get members from DB
  $scope.getMemeber = function() {
    $http.get('model/getMember.php').success(function(data) {
      $scope.members = data;
      console.log("memberCtrlTrue");
    });
  }
}]);

更新

基本上，您为 UI 上的不同操作分配了不同的控制器，它们为 HTML 上的不同元素创建不同的控制器上下文。

通过查看您的 html，我发现了几个问题。您不应该创建不必要的角度控制器。正如我所见，您已经创建了getMemberCtrl、'deleteMemberCtrl' 和addMemberCtrl。我认为没有任何理由为每个操作创建单独的控制器。而不是你应该有一个控制器，它将所有这些控制器代码组合在一起。