How to summarize values using AngularJS and table HTML?

Question

This is the scenario:

One table with 5 rows.
Row 1 - displays total purchase.
Row 2 - displays total Fruits purchase.
Row 3 - displays total Vegetables purchase.
Row 4 - Is a fruits table with n fruits, generated dynamically with php.
Row 5 - Is a vegetable table with n vegetable, generated dynamically with php.

As you can see in the fiddle link, the user must choose the quantity of a specific product, so the final price for this product is updated and the total and group price as well.

I could do this using jquery, but I would like to accomplish this task using AngularJs.

I've started to code. But so far I have one issue. It dipslays $NaN in the total product line.

So, how to avoid display this $NaN when there is nothing inside quantity?
How to link the 3 totals fields to each individual products group?

Note. The approach I have used is not the best one. Feel free to change the approach.
Any suggestion? JSFIDDLE

<table style='width:100% ;border: 2px solid #00BABF;' ng-app=''> 
  <tr>
    <td>Total: $<span id='total'></span></td>
  </tr>

  <tr>
    <td>Fruit: $<span id='tot_fruit'></span></td>
  </tr>

  <tr>
    <td>Veget: $<span id='tot_veget'></span></td>
  </tr>


  <tr id='fruits'>
     <td>
         <table id='tbl_fruits' style='width:100% ;border: 2px solid red;'>
            <tr>
             <th style=' padding: 10px;  text-align: left;'>Name</th>
             <th style=' padding: 10px;  text-align: left;'>Quanty</th>
             <th style=' padding: 10px;  text-align: left;'>Price</th>
             <th style=' padding: 10px;  text-align: left;'>Total</th>
            </tr>
            <tr id='Fruit_1ID'>
              <td class="name">Fruit_1</td>
              <td><input id='qty_Fruit_1ID' ng-model='Fruit_1ID'></td>
              <td>$<span id='price_Fruit_1ID'>10</span></td>
              <td>$<span id='tot_Fruit_1ID'>{{Fruit_1ID*10}}</span></td>
            </tr>
            <tr id='Fruit_nID'>
              <td class="name">Fruit_n</td>
              <td><input id='qty_Fruit_nID' ng-model='Fruit_nID'></td>
              <td>$<span id='price_Fruit_nID'>5</span></td>
              <td>$<span id='tot_Fruit_nID'>{{Fruit_nID*5}}</span></td>
            </tr>
         </table>
     </td>
  </tr>

  <tr id='vegetable'>
     <td>
         <table id='tbl_vegetabl' style='width:100% ;border: 2px solid green;'>
            <tr>
             <th style=' padding: 10px;  text-align: left;'>Name</th>
             <th style=' padding: 10px;  text-align: left;'>Quanty</th>
             <th style=' padding: 10px;  text-align: left;'>Price</th>
             <th style=' padding: 10px;  text-align: left;'>Total</th>
            </tr>
            <tr id='Vegetab_1ID'>
              <td class="name">Vegetab_1</td>
              <td><input id='qty_Vegetab_1ID' ng-model='Vegetab_1ID'></td>
              <td>$<span id='price_Vegetab_1ID'>7</span></td>
              <td>$<span id='tot_Vegetab_1ID'>{{Vegetab_1ID*7}}</span></td>
            </tr>
            <tr id='Vegetab_nID'>
              <td class="name">Vegetab_n</td>
              <td><input id='qty_Vegetab_nID' ng-model='Vegetab_nID'></td>
              <td>$<span id='price_Vegetab_nID'>3</span></td>
              <td>$<span id='tot_Vegetab_nID'>{{Vegetab_nID*3}}</span></td>
            </tr>
         </table>
     </td>
  </tr>

</table>

Oleksii · Accepted Answer · 2016-02-18 15:44:23Z

3

So, how to avoid display this $NaN when there is nothing inside quantity? How to link the 3 totals fields to each individual products group?

You could simply use double vertical slash || to avoid situation when your expression evaluates as NaN.
The same as above. But you definitely should use controller and move all logic there, or even to the services. Link to JsFiddle I think a good solution is to store price for each food into the variable or even as a constant.

answered Feb 18, 2016 at 15:44

Oleksii

3283 silver badges17 bronze badges

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

2 Comments

IgorAlves Over a year ago

Hi Aleksey, that is nice. Issue 1 is solved. But the issue 2. In this example I have only 2 fruits. The database could have 2, 20 or 200 fruits. So in this case we should use ` total : {{(Fruit_1ID*10 || 0) + (Fruit_nID*5 || 0) + ...+200 times? }}` . Yes it works, since I am creating the page dynamically. Do you think is there a better solution for this?. Think about the Grand total field. We should summarize all fruits and all vegeteables.

Oleksii Over a year ago

When you get the data from database you could use something like ng-repeat="fruit in fruites" for displaying your rows. Than you'll be able to iterate you array and find total price (calculate()). And for displaying total price in real-time you could use $watchCollection listener and invoke your calculate() function

Collectives™ on Stack Overflow

How to summarize values using AngularJS and table HTML?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related