ng-repeat内のangularJsで請求書を生成する方法は？

Question

私はボタンを押して、ショー（データ）機能のためにng-clickイベントを使用すると、その製品の答えを計算するだけですが、私はすべての製品の答えを求めています。製品のデータ

<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今私は何をすべきかを、すべての製品のための私のshow(data)機能でこの答えを使用したい場合は一部

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

？だから、私の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