如何使用angular獲取可數據數據到Modal？

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對象，

$scope.emp = emp;  
    $ionicModal.fromTemplateUrl('modal.html', { 
      scope: $scope    
     }).then(function (modal) { 

     });