如何在 ng-repeat 中的 angularJs 中生成发票？

Question

如果我放置按钮并使用 ng-click 事件进行显示（数据）功能，它只计算一种产品的答案，但我想要所有产品的答案，我能做什么。这是我的 ng-repeat 部分，它显示产品数据。

<tr ng-repeat="data in data" ng-init="show(data)">
         <td>{{data.product_name}}</td>    
         <td>{{data.type}}</td>
         <td>{{data.quantity}}</td>
         <td>{{data.sale_prize}}</td>
         <td>{{data.sale_prize*data.quantity}}</td>
         <td>{{data.discount}}</td>
</tr>

现在我要计算总价、折扣价、税价和所有总价 由后续部分显示。

<div id="invoice" hidden="hidden">
    <label>Sub Total:</label>
          <input type="text"  placeholder="sale price"  ng-value="data.sale_prize * data.quantity" readonly="true"/><br />

          <label >Tax(2%):</label>
          <input type="text" readonly="true"  ng-value="((data.sale_prize * data.quantity)*2)/100" placeholder="tax"/>
          <label >Discount(%):</label>
          <input type="text" readonly="true"  ng-value="((data.sale_prize * data.quantity)*data.discount)/100"  placeholder="discount(%)" /><br />
          <label>Total Price:</label>

          <input type="text"  ng-value="(((data.sale_prize * data.quantity)+((data.sale_prize * data.quantity)*2)/100)-((data.sale_prize * data.quantity)*data.discount)/100) "readonly="true" placeholder="Total price"/>
</div>

js部分

$scope.show = function(data)
{
      $("#invoice").fadeIn(2000);
      //what to do here for calculate answer for multiple product
}

现在，如果我想在我的 show(data) 函数中为所有产品使用这个答案，那该怎么办？那么，我的show(data) 函数是什么？

Answer 1

   <table>
         <tr ng-repeat="data in data">
           <td>{{data.product_name}}</td>    
           <td>{{data.type}}</td>
           <td>{{data.quantity}}</td>
           <td>{{data.sale_prize}}</td>
           <td>{{data.sale_prize*data.quantity}}</td>
           <td>{{data.discount}}</td>
         </tr>
   </table>

   <button ng-click="showinvoice()">Show Invoice</button>

   <br/><Br/>

     <div id="invoice" style="display:none">
       <label>Sub Total:</label>
        <input type="text"  placeholder="sale price"  
         ng-value="invoice.total" readonly="true"/><br />

         <label >Tax(2%):</label>
         <input type="text" readonly="true"  
         ng-value="invoice.tax" placeholder="tax"/>

         <label >Discount(%):</label>
          <input type="text" readonly="true"  
         ng-value="invoice.discount" 
         placeholder="discount(%)" /><br />
            <label>Total Price:</label>

         <input type="text" 
         ng-value="invoice.total+invoice.tax-invoice.discount"readonly="true" placeholder="Total price"/>

         </div>

Js 会是这个样子：

  $scope.data = [
    {
  'product_name' : 'sample_one',
  'type' : 'sanple_type',
  'quantity' : 1,
  'sale_prize' : 5000,
  'discount' : 3

},
    {
  'product_name' : 'sample_two',
  'type' : 'sanple_type',
  'quantity' : 5,
  'sale_prize' : 5000,
  'discount' : 3

},
    {
  'product_name' : 'sample_three',
  'type' : 'sanple_type',
  'quantity' : 1,
  'sale_prize' : 5000,
  'discount' : 5

}
 ]

  $scope.invoice = {};
  var total = 0;
  var discount = 0;
  for (var i=0; i < $scope.data.length; i++) {
     total = total + $scope.data[i].sale_prize*$scope.data[i].quantity;
     discount = discount+$scope.data[i].discount;
  }
  $scope.invoice['total'] = total;
  $scope.invoice['tax'] = (total*2)/100;
  $scope.invoice['discount'] = (total*discount)/100;


  $scope.showinvoice = function () {
    $('#invoice').fadeIn()
 }

我正在分享一个工作演示。可能对你有帮助

演示：https://jsbin.com/gipilo/15/edit?html,js,output