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 get調用。在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。我不認爲有任何理由爲每個操作創建單獨的控制器。而不是你應該有一個單一的控制器，將所有這些控制器代碼組合在一起。