Ashane Alvis Ashane Alvis - 3 months ago 13
Javascript Question

How do I get datatable data to the Modal with angular?

I have created a table which shows employee details. What I want to do is instead of showing all the data in a table, I want to show all details in a modal when a employee row is clicked. I managed to open the modal when a row is clicked but how do I get the data to the modal.

Here's my 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>


and the controller which opens the modal.

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

};


And finally my modal

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


Here's the
selectRow()
function is doing the trick. Help would be appreciated.

Answer

You you can use separate variable for modal it self, whenever you click any of the row $scope.modalData will also got changed and thus your modal :

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

        };

And within 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>