同じ角度コントローラで2つの角度データテーブルを使用するにはどうすればよいですか？

Question

私はデータテーブルを持っています。私がデータテーブルの行をクリックすると、ブートストラップモーダルがポップアップし、他のものの中には別のデータテーブルがあります。しかし、私はそれを動作させることはできません。モーダルがポップアップし、コンソールにエラーが表示されない場合、データテーブルは表示されません。非同期メソッドがhttpsを介して動作していなかったため、データ型でng-repeatを使用しました。このアプローチにより、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

私は最終的に何が起こっているかを知りました。私は、サーバから行を1つずつ取り出して、データテーブルを初期化していました。これは、「警告：データテーブルを再初期化できません。

私がしたのは、すべての行を格納する一時変数を作成し、サーバーからすべての行を取得した後に、その変数のテーブルのngモデルを指し示し、うまくいきました。