how to generate invoice in angularJs within ng-repeat?

Question

if i put button and use ng-click event for show(data) function its only calculate the answer for one product but i want answer for all products so,what can i do.here is my ng-repeat part which display the data of product.

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

Now i want to calculate total price,discount price,tax price,And all total which is display by follow part.

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

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

Now if i want to use this answers in my show(data) function for all product then what to do? so,what would be my show(data) function??

but this ng-value is showing the calculated answer for only one product but i want for multiple product so what to do? @Loading.. — kajal jethva, Sep 14 '16 at 07:01
The calculation also in ng-repeat ? And can you show me your json data? — Mohit Tanwani, Sep 14 '16 at 07:04
Please have a look at this: http://stackoverflow.com/questions/24172745/ng-init-in-ng-repeat-shows-only-the-last-item-info — mario.van.zadel, Sep 14 '16 at 07:33

score 2 · Accepted Answer · answered Sep 14 '16 at 07:40

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

And Js will look like this :

  $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()
 }

I am sharing a working demo. It may help you

Demo : https://jsbin.com/gipilo/15/edit?html,js,output

what u have show in static but in my case im fetching data from database@KrishCdbry — kajal jethva, Sep 14 '16 at 07:56
Yes I took sample data to show you an example but you can get the data from database and assign it to $scope.data — KrishCdbry, Sep 14 '16 at 07:58
So it will be something like $http.get('some API link').success(function(data) { $scope.data = data; } It depends on your API response. — KrishCdbry, Sep 14 '16 at 08:00
No data contains the items which you need to show one by one and invoice is the final one which will be generated by calculating all data items. So you need to assign the database response to $scope.data and invoice will calculate all the data items. — KrishCdbry, Sep 14 '16 at 08:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123325/discussion-between-krishcdbry-and-kajal). — KrishCdbry, Sep 14 '16 at 08:49

how to generate invoice in angularJs within ng-repeat?

1 Answers1