Question

我有AngularJS应用程序，其中包含一个jquery DataTable，其中填充了来自数据库的客户数据。 DataTable的每一行都有一列，其中包含一个Edit按钮和一个Bill按钮。 Bill按钮启动BootStrap Modal对话框，其中包含一个简单的HTML表。我遇到的问题是主页面中的DataTable信息被附加到Modal对话框中的HTML表格。

主页数据表定义

<div class="row">
    <div class="col-md-12">
        <h2>Customers</h2>
        <br><br>
        <table class="table table-hover table-bordered" style="width:100%">
            <thead>
                <tr>
                    <td>Username</td>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Created Date</td>
                    <td>Options</td>  <!-- contains two buttons -->
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

填充DataTable的AngularJS控制器函数

$scope.getCustomers = function() {

    $http.get($scope.server + "allcustomers").success(function(data) { 

        for(var i in data) {

            $customer = $("<tr>" +
                            "<td>" + data[i].username + "</td>" +
                            "<td>" + data[i].firstName + "</td>" +
                            "<td>" + data[i].lastName + "</td>" +
                            "<td>" + data[i].createdDate + "</td>" +  
                            "<td>" +
                             "<div class='btn-toolbar'>" +
                                "<button type='button' class='btn btn-danger' ng-click='billCustomer(\"" + data[i].username + "\")'>Bill</button>" +
                             "</div>" +
                            "</td>" + 
                        "</tr>");

            $compile($customer)($scope);

            $('tbody').append($customer);       
        }   

        $(".table").DataTable().page.len( 10 ).draw(); 
    });

}

模态对话

<!-- Modal -->
<div class="modal fade" id="billCustomer" role="dialog">

    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" ng-controller="dashboardController">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="billCustomer-title"></h4>
            </div>
            <div class="modal-body row">
                <div class = "col-md-8">
                    <h2>Billing History</h2>
                    <div class="scrollable">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <td>Date</td>
                                    <td>Amount</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2018-03-15</td>
                                    <td>$40.00</td>
                                </tr>
                            </tbody>                
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>            
    </div>
</div>

有人可以帮助我理解为什么我的DataTable中包含按钮的数据会被附加到我在Modal对话框中的表格中吗？感谢。

数据表信息附加到模态对话框中的表

0 个答案: