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服务电话＆amp;然后调用get getMember来电话。这不能保证getMember delete成功后的model/getMember.php。

要解决此问题，请在删除ajax成功后调用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"); }); } }]);调用。

<强>控制器

getMemberCtrl

<强>更新

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

通过查看你的HTML，我发现了它的几个问题。您不应该创建不必要的角度控制器。我看到你创建了addMemberCtrl，'deleteMemberCtrl'＆amp; java -jar avro-tools-1.7.7.jar fromjson --schema-file cpc.avsc --codec deflate test.1g.json > test.1g.deflate.avro。我认为没有任何理由为每个操作创建单独的控制器。而不是你应该有一个控制器，它将所有这些控制器代码组合在一起。

删除成员时AngularJS不刷新表

1 个答案: