如何使用AngularJS和表格HTML彙總值？

Question

這是場景：

1. 一張有5行的表格。
2. 第1行 - 顯示總購買量。
3. 第2行 - 顯示水果購買總額。
4. 排3 - 顯示總蔬菜購買。
5. 第4行 - 是一個有n個水果的水果桌，用php動態生成。
6. 第5行 - 是一個有n個蔬菜的菜桌，用php動態生成。

正如您在小提琴鏈接中所看到的，用戶必須選擇特定產品的數量，以便更新此產品的最終價格以及總價格和組合價格。

我可以用jQuery來做到這一點，但我想用AngularJs完成這個任務。

我已經開始編碼了。但到目前爲止，我有一個問題。它在整個產品系列中減少了$NaN。

1. 那麼，如何避免在沒有數量的情況下顯示這個$NaN？
2. 如何將3個總計字段鏈接到每個單獨的產品組？

注意。我用過的方法並不是最好的方法。隨意改變方法。
有什麼建議嗎？ 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> 

Answer 1

那麼，如何避免這顯示$ NaN當裏面什麼也沒有數量是多少？ 如何將3個總計字段鏈接到每個單獨的產品組？

• 你可以簡單地使用雙垂直斜線||，以避免局勢 當你的表達式的計算結果爲NaN。
• 與上面相同。 但是你絕對應該使用控制器，並將所有邏輯移動到那裏，甚至移動到服務。 Link to JsFiddle 我認爲一個好的解決方案是將每種食物的價格存入變量甚至作爲一個常量。