如何使用AngularJS和表格HTML汇总值？

这是一个场景：

一张有5行的桌子

第1行-显示采购总额

第2行-显示水果购买总额

第3行-显示蔬菜采购总额

第4行-是一个包含n个水果的水果表，使用php动态生成

第5行-是一个包含n个蔬菜的蔬菜表，使用php动态生成

正如您在fiddle链接中所看到的，用户必须选择特定产品的数量，因此此产品的最终价格以及总价和组价都会更新

我可以使用jquery来完成这项任务，但我想使用AngularJs来完成这项任务

我已经开始编写代码了。但到目前为止，我有一个问题。它在整个产品线中减少了

$NaN

那么，当数量中没有任何内容时，如何避免显示此

$NaN

如何将3个总计字段链接到每个产品组

注意。我使用的方法不是最好的。请随意更改方法。
有什么建议吗

总数：$
水果：$
维吉特：$
名称
数量
价格
全部的
水果1
$10
${{Fruit_1ID*10}
水果
$5
${{Fruit_nID*5}
名称
数量
价格
全部的
Vegetab_1
$7
${{Vegetab_1ID*7}
蔬菜
$3
${{Vegetab_nID*3}

那么，当数量中没有任何内容时，如何避免显示此$NaN？ 如何将3个总计字段链接到每个产品组

• 您可以简单地使用双垂直斜杠

  |

  来避免这种情况 当表达式的计算结果为

  NaN

  时
• 同上。 但您肯定应该使用控制器并将所有逻辑移到那里，甚至移到服务。 我认为一个好的解决方案是将每种食物的价格存储到变量中，甚至作为一个常数

那么，当数量中没有任何内容时，如何避免显示此$NaN？ 如何将3个总计字段链接到每个产品组

• 您可以简单地使用双垂直斜杠

  |

  来避免这种情况 当表达式的计算结果为

  NaN

  时
• 同上。 但您肯定应该使用控制器并将所有逻辑移到那里，甚至移到服务。 我认为一个好的解决方案是将每种食物的价格存储到变量中，甚至作为一个常数

---

嗨，阿列克西，很好。问题1解决了。但是问题2。在这个例子中，我只有两种水果。数据库可能有2个、20个或200个水果。所以在这种情况下，我们应该使用'total:{（Fruit_1ID*10 | | 0）+（Fruit_nID*5 | | 0）+……+200次？}'。是的，它可以工作，因为我正在动态创建页面。你认为有更好的解决办法吗？。想想总面积。我们应该总结所有水果和蔬菜。当您从数据库中获取数据时，您可以使用类似

ng repeat=“水果中的水果”

的内容来显示您的行。这样，您就可以迭代数组并找到总价（

calculate（）

）。要实时显示总价，您可以使用

$watchCollection

侦听器并调用

calculate（）

函数hi-Aleksey，这很好。问题1解决了。但是问题2。在这个例子中，我只有两种水果。数据库可能有2个、20个或200个水果。所以在这种情况下，我们应该使用'total:{（Fruit_1ID*10 | | 0）+（Fruit_nID*5 | | 0）+……+200次？}'。是的，它可以工作，因为我正在动态创建页面。你认为有更好的解决办法吗？。想想总面积。我们应该总结所有水果和蔬菜。当您从数据库中获取数据时，您可以使用类似

ng repeat=“水果中的水果”

的内容来显示您的行。这样，您就可以迭代数组并找到总价（

calculate（）

）。要实时显示总价，您可以使用

$watchCollection

侦听器并调用

calculate（）

函数

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