On click of each row,corresponding row data should get print in Angular js

Question

Hello friends, I am new in angular js.I need help to print the each row's data on click of button assigned to each row. Below is my code.

HTML code:

List item

enter code here

<div class="jumbotron">
  <table border='1'>
    <tr ng-show="reports.length!=0" ng-repeat="report in reports">

      <td>{{report.first_name}}</td>
      <td>{{report.emp_id}}</td>
      <td>{{report.month_calendar_days}}</td>
      <td>{{report.pay_days}}</td>
      <td>{{report.paid_days}}</td>
      <td> 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
      <td><button ng-click="PrintRow()">Print Row</button></td>
    </tr>

  </table>
</div>   </div>

Controller Code:

angular.module('app', [])

.controller('mainController', ['$scope', '$filter', function($scope,
$filter) {
    $scope.noAlphabetSortPlease = function(obj){
      return Object.keys(obj);
    }
     $scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},
{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},
{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];


  $scope.PrintRow=function($index){          window.print();
            }   }]); </script>

You don't need the ng-show, and on the line above the ng-click it looks like something's missing. — rrd
– rrd, Commented Jun 6, 2017 at 10:23
that does not matter..i have added button to each row.when user click any row,corresponding row should get print.. — Gurunath Bhopale
– Gurunath Bhopale, Commented Jun 6, 2017 at 10:25
Already each row is getting printed in the table. What exactly is it that you want to print and in what format? — Vivz
– Vivz, Commented Jun 6, 2017 at 10:27
suppose if i click print button of first row,then only first row should get print ,not all. and same for other rows also — Gurunath Bhopale
– Gurunath Bhopale, Commented Jun 6, 2017 at 10:29

Vivz · Accepted Answer · 2017-06-06 11:18:45Z

2

Pass the corresponding object to the function call and overide your reports variable.

<tr ng-show="reports.length!=0" ng-repeat="report in reports">

      <td>{{report.first_name}}</td>
      <td>{{report.emp_id}}</td>
      <td>{{report.month_calendar_days}}</td>
      <td>{{report.pay_days}}</td>
      <td>{{report.paid_days}}</td>
      <td> 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
      <td><button ng-click="PrintRow(report)">Print Row</button></td>
    </tr>


  $scope.PrintRow=function(obj){   
    $scope.reports=[];
    $scope.reports.push(obj);
            }

Or If you want all data to persist and want to print the corresponding data of each row below the new table.Then you could do something like this

<tr ng-show="reports.length!=0" ng-repeat="report in reports">

      <td>{{report.first_name}}</td>
      <td>{{report.emp_id}}</td>
      <td>{{report.month_calendar_days}}</td>
      <td>{{report.pay_days}}</td>
      <td>{{report.paid_days}}</td>
      <td> 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
      <td><button ng-click="PrintRow(report)">Print Row</button></td>
    </tr>

$scope.newArray=[];
  $scope.PrintRow=function(obj){   
    $scope.newArray.push(obj);
            }

Format new array to your desire.

  <tr ng-show="reports.length!=0" ng-repeat="report in newArray">

      <td>{{report.first_name}}</td>
      <td>{{report.emp_id}}</td>
      <td>{{report.month_calendar_days}}</td>
      <td>{{report.pay_days}}</td>
      <td>{{report.paid_days}}</td>
      <td> 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>
      <td><button ng-click="PrintRow(report)">Print Row</button></td>
    </tr>

edited Jun 6, 2017 at 11:18

answered Jun 6, 2017 at 10:33

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vivz Over a year ago

Is this what you are looking for?

Gurunath Bhopale Over a year ago

Just one more help.When i am clicking Print button of first row,then 2nd and 3rd rows not displaying...

Vivz Over a year ago

So you are telling that if I click the correspond print button of a row, all data should persist but only the corresponding row should be printed ?

Vivz Over a year ago

You just have to pass the corresponding object to the print function and capture the value in a new array. Then you can populate this new array in a new table or div below your existing table in whatever way you desire. Hope this is what you are looking for?

Collectives™ on Stack Overflow

On click of each row,corresponding row data should get print in Angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related