Question

这是情景：

一个包含5行的表格。
第1行 - 显示总购买量。
第2行 - 显示购买水果的总数。
第3行 - 显示购买的蔬菜总量。
第4行 - 是一个带有n个水果的水果表，用php动态生成。
第5行 - 是一个带有蔬菜的蔬菜桌，用php动态生成。

正如您在小提琴链接中所看到的，用户必须选择特定产品的数量，因此更新此产品的最终价格以及总价格和团体价格。

我可以使用jquery做到这一点，但我想使用AngularJs来完成这项任务。

我开始编码了。但到目前为止，我有一个问题。它在整个产品系列中显示$NaN。

那么，当数量不足时，如何避免显示此$NaN？
如何将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 我认为一个好的解决方案是将每种食物的价格存储到变量中，或者甚至作为常数。

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

1 个答案: