Как да обобщим стойностите с помощта на AngularJS и HTML таблицата? - ъгли

Това е сценарият:

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>

Отговори:

И така, как да се избегне показването на този $ NaN, когато няма нищо вътре в количеството? Как да свържете полетата с 3 съвкупности към всяка отделна група продукти?

• Можете просто да използвате двойна вертикална наклонена черта || за да се избегне ситуацията когато вашият израз се оценява като NaN.
• Същото като по-горе. Но определено трябва да използвате контролера и да преместите цялата логика там или дори към услугите. Връзка към JsFiddle Мисля, че добро решение е да се съхранява цената на всяка храна в променливата или дори като постоянна.