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) {

        });

如何使用角度将数据表数据传输到Modal？

2 个答案: