Bootstrap和AngularJS:删除第一行的模态确认

时间:2015-12-20 14:48:04

标签: html angularjs twitter-bootstrap

我得到table,每个成员都会重复delete button。当我不使用button时,确认modal会有效,但如果我使用Modal,则第一行只会被删除。 正如我研究的那样,可能是因为delete正在重复,所以value会停留在第一行。

表HTML代码:

<table class="table table-bordered" id="customForms" ng-show="showMembers">
    <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><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> DELETE </button>
                    <div id="myModal" class="modal fade" role="dialog">
                      <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Delete Confirmation</h4>
                          </div>
                          <div class="modal-body">
                            Are you sure you wish to delete this row? 
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" ng-click="deleteMember(member)" data-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                          </div>
                        </div>
                      </div>
                    </div>      
            </td>
        </tr>
    </tbody> 
</table>

AngularJS代码:

$scope.deleteMember = function(member) {        
        $http.post('model/deleteMember.php', member).success(function(data) {
        $scope.getMember();
        });
}

0 个答案:

没有答案