データテーブルのデータを角を持ってモーダルにどのように取得するのですか？

Question

従業員の詳細を示すテーブルを作成しました。テーブル内のすべてのデータを表示するのではなく、従業員の行がクリックされたときにすべての詳細をモーダルに表示する必要があります。私は行がクリックされたときにモーダルを開くことができましたが、データをモーダルにどのように取得しますか？

は、ここに私のhtml

<table id="basic-datatables" class="table table-bordered table-hover" cellspacing="0" width="100"> 
    <thead style="text-align:match-parent"> 
     <tr> 
      <th rowspan="1" colspan="1" style="width:195px">First Name</th> 
      <th rowspan="1" colspan="1" style="width:195px">Last Name</th> 
      <th rowspan="1" colspan="1" style="width:200px">Date Of Birth</th> 
      <th rowspan="1" colspan="1" style="width:100px">Gender</th> 
      <th rowspan="1" colspan="1" style="width:200px">Email</th> 
      <th rowspan="1" colspan="1" style="width:100px">Mobile</th> 
      <th rowspan="1" colspan="1" style="width:190px">Designation</th> 
      <th rowspan="1" colspan="1" style="width:200px">Date of Join</th> 
      <th rowspan="1" colspan="1" style="width:195px">NIC</th> 
      <th rowspan="1" colspan="1" style="width:100px">Dept. Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-click="selectRow(emp)" ng-repeat="emp in employeeDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))" style="text-align:center"> 
      <td>{{emp.fname}}</td> 
      <td>{{emp.lname}}</td> 
      <td>{{emp.DOB | dateFormat}}</td> 
      <td>{{emp.gender}}</td> 
      <td>{{emp.email}}</td> 
      <td>{{emp.mobile_no}}</td> 
      <td>{{emp.designation}}</td> 
      <td>{{emp.date_of_join | dateFormat}}</td> 
      <td>{{emp.nic}}</td> 
      <td>{{emp.department_name}}</td> 
     </tr> 
    </tbody> 
</table> 

とモーダルを開くコントローラです。

$scope.selectRow = function (details) {  
      $("#empDetailsModal").modal("show"); 

     }; 

そして最後に

<div id="empDetailsModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="fa fa-times-circle-o"></span></button> 
       <h4 class="modal-title">Employee Details</h4> 
      </div> 
      <div class="modal-body"> 
       <table id="basic-datatables"> 
        <tbody> 
         <tr> 
          <th class="col-md-8">Name:</th> 
          <td>{{emp.fname}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 

私のモーダルここselectRow()機能は、トリックをやっているのです。ヘルプをいただければ幸いです。

Answer 1

あなたがクリックするたびに行$scope.modalDataのいずれも変更し、そのため、あなたのモーダルてしまっただろう、モーダルそれを自己のために別の変数を使用することができます。

$scope.selectRow = function (details) { 
    $scope.modalData = details 
      $("#empDetailsModal").modal("show"); 

     }; 

とHTML内：

<div id="empDetailsModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="fa fa-times-circle-o"></span></button> 
       <h4 class="modal-title">Employee Details</h4> 
      </div> 
      <div class="modal-body"> 
       <table id="basic-datatables"> 
        <tbody> 
         <tr> 
          <th class="col-md-8">Name:</th> 
          <td>{{modalData.fname}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

ポップアップを作成し、現在のスコープでスコープを設定し、empオブジェクトを設定します。