单击每一行,相应的行数据应以Angular js打印

时间:2017-06-06 10:19:47

标签: html css angularjs

  1. 朋友们,我是角度j的新手。我需要帮助打印每个 单击分配给每行的按钮的行数据。以下是我的 代码。

    HTML code:

    • 列表项

    在这里输入代码

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

    控制器代码:

    angular.module(&#39; app&#39;,[])

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

1 个答案:

答案 0 :(得分:2)

将相应的对象传递给函数调用并覆盖报表变量。

<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);
            } 

或者如果您希望所有数据都保持不变并希望打印新表格下方每行的相应数据。那么您可以这样做

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

{{newArray}}

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

根据您的需要格式化新阵列。

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