Question

我有一个数据表。当我点击数据表的一行时，会弹出一个bootstrap模式，其中包含另一个数据表。但是，我无法使其发挥作用。当模式弹出并且控制台上没有出现错误时，不会显示任何数据表。我在数据表中使用了ng-repeat，因为异步方法没有通过https工作，这种方法允许我更容易地自定义tr元素。

controller.js：

...
var vm = this;

vm.dtOptions = DTOptionsBuilder.newOptions();

vm.dtColumns = [
    DTColumnDefBuilder.newColumnDef(0), // ProjectID
    DTColumnDefBuilder.newColumnDef(1), // Name
    DTColumnDefBuilder.newColumnDef(3), // Priority
    DTColumnDefBuilder.newColumnDef(4), // Status
    DTColumnDefBuilder.newColumnDef(5), // ProjectManager
    DTColumnDefBuilder.newColumnDef(6), // Contract
    DTColumnDefBuilder.newColumnDef(7) // Description
];

vm.quotationsOptions = DTOptionsBuilder.newOptions();
vm.quotationsCollumns = [
    DTColumnDefBuilder.newColumnDef(8), // Number
    DTColumnDefBuilder.newColumnDef(9), // Phase
    DTColumnDefBuilder.newColumnDef(10), // Reason
    DTColumnDefBuilder.newColumnDef(11) // Date
];

$scope.openModal = function (p) {
    $scope.selectedContractID = p.ContractID;
    $scope.projectModal = p;
    $scope.quotationsModal = [];
    var i, j;
    for (i = 0; i < p.Quotations.length; i++) {
        $http
            .get("http://localhost:63680/api/quotations/" + p.Quotations[i])
            .then(function (response) {
                $scope.doesProjectHaveQuotations = true;
                $scope.quotationsModal.push(response.data);
                $scope.quotationsModal.sort(function (a, b) {
                    return a.ID - b.ID;
                });
            });
    }
};

的index.html

<div class="panel panel-default col-md-12" id="data-tables">
    <div class="panel-body">
        <div class="page-header">
            <h1>Projects
                <small>Overview</small>
            </h1>
        </div>
        <table datatable="ng" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumnDefs"
               class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Project ID</th>
                    <th>Contract</th>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Project Manager</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="p in projects" data-toggle="modal" data-target="#edit-quotation"
                    ng-click="openModal(p)" )>
                    <td>{{ p.ProjectID }}</td>
                    <td>{{ p.Contract }}</td>
                    <td>{{ p.Name }}</td>
                    <td>{{ p.Status }}</td>
                    <td>{{ p.Priority }}</td>
                    <td>{{ p.ProjectManager }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="edit-quotation" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Project's Quotations</h4>
                <h5 class="modal-title" style="margin-top: 10px"><b>Name: </b>{{ projectModal.Name }}</h5>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table datatable="ng" dt-options="showCase.quotationsOptions" dt-columns="showCase.quotationsCollumns" class="table">
                                <thead>
                                    <tr>
                                        <th>Project ID:
                                            <span class="notBold">{{ projectModal.ProjectID }}</span>
                                        </th>
                                        <th>Contract:
                                            <span class="notBold">{{ projectModal.Contract }}</span>
                                        </th>
                                        <th>Status:
                                            <span class="notBold">{{ projectModal.Status }}</span>
                                        </th>
                                        <th>Priority:
                                            <span class="notBold">{{ projectModal.Priority }}</span>
                                        </th>
                                        <th>Project Manager:
                                            <span class="notBold">{{ projectModal.ProjectManager }}</span>
                                        </th>

                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="table-responsive" ng-if="doesProjectHaveQuotations">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>Number</th>
                                        <th>Phase</th>
                                        <th>Reason</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="q in quotationsModal" ng-click="quotationIsSelected(q)">
                                        <td>{{ q.Number }}</td>
                                        <td>{{ q.PhaseName }}</td>
                                        <td>{{ q.ReasonName }}</td>
                                        <td>{{ q.Date | date}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div ng-if="!doesProjectHaveQuotations">
                            <p style="text-align: center;">This project doesn't currently have any quotations.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary dropdown-toggle" ng-click="addQuotation()">Add
                    Quotation
                </button>
                <button type="button" class="btn btn-primary dropdown-toggle" ng-click="projectDetails()">Details
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我不知道如何解决这个问题。由于没有错误，我不确定问题出在哪里。我做错了什么？

Answer 1

我终于知道发生了什么。我一个接一个地从服务器中检索行，每次我得到一个可以给我＆＃34; 3的数据表。警告：无法重新初始化Datatable＆＃34;。

所以我所做的是创建一个临时变量，我将存储我的所有行，并且在确定我从服务器检索了所有行之后，我会将表的ng-model指向该变量并且它起作用。 / p>

如何在同一角度控制器上使用两个角度数据表？

1 个答案: